JQuery Selectors: How to select item with specific

Question

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.

Answer 1

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.

Answer 2

$(".class#id") or $("#id.class") will both work.

Everyone's comments in this question is that there is no reason to do this... there may not be a "best practices" reason to do this with a well designed program, but in the real world most of us work at companies that have code bases that are not very well organized and if you are working on a large 10000+ file program, you might not want to replace a non-descriptive id and by adding a class to the selector you can help your fellow coders understand where the id came from.

Case in point, I work on a project where we have container DIVs that create "widgets" on the page... these "widgets" are given a numeric id from the database, so we end of with <div id="12345" class="widget">

Someone else coded the ambiguous id a long time before I worked here... but it remains. When I write JQuery, I would prefer not to make more of a confusing mess of the code... so instead of $("#12345") I might prefer $(".widget#12345") so that someone doesn't have to spend a half-hour trying to figure out that the 12345 id in this scenario is for a widget.

So while $("#12345") and $(".widget#12345") select the same thing... it makes the code much more readable for my co-workers and that is more important than a fraction of a second in speed improvement for the javascript.

Answer 3

Just a follow-up FYI:

If you are looking to reference an id and sub-class (e.g. the green statusLight but not the blue):

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

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

Then you need to add a space $("#green .statusLight")

Answer 4

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 5

Another reason that you would probably do this is if you have cached generic code looking for a specific Id, but you only want to activate it when you have a specific style assigned. Especially when rendering scafolded MVC items where IDs may be in certain views, but you don't want to have action taken on, say... "hidden" id fields, but in other views these may be lookup values in a combo and have a Select2 addin assigned...

Answer 6

The easiest way is:

$('.statusLight[id=green]');

As the id is a attribute you can use the attribute selector