JQuery Selectors: How to select item with specific class *and* id

Question

Hi all,

I'm trying to select an HTML element on my page that has a specific class and ID. Here's the tag:

<div class="statusLight" id="green"></div>

I tried this with no luck:

$statusLight = $('.statusLight#green');

I know that I could simply say

$statusLight = $('#green');

But I was trying to find a way to select it based on its class as well. Any help would be appreciated.

Thanks.

Answer 1

Both #green.statusLight and .statusLight#green are valid selectors and should select element you're looking for. First one will be faster though.

Are you using $(...) after your document is loaded, i.e. from $(document).ready(function() { ... }) or by placing your script after your element?

Answer 2

I'm not entirely sure why you would want to do this.

An ID should be unique, and therefore when you select it, there is no need for any further specialisation. If not then you need to modify your HTML to make it so.

This scenario would only make sense if you were combining a class selector with an element selector, e.g.

$("div.statuslight")

But in your example, there's just no point, as you have an ID anyway!

Answer 3

Why would you need to select on the class as well? IDs should be unique so adding the class to that wouldn't buy you anything. If you just use ID it's more efficient because then jQuery can just use the native getElementByID which is always the fastest. Keep your queries simple when you can.