14

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.

7
  • 5
    Why would you want to select by class if you know the ID? By design, ID's are unique, therefore this would be the fastest way to select an element.
    – cfbarbero
    Jan 7, 2010 at 16:03
  • 1
    I don't understand. The id should be UNIQUE and end all filtering. Applying anything + id should be the exact same as selecting just by ID. Why would you ever want to do this? Jan 7, 2010 at 16:05
  • At any rate, I'm pretty sure jQuery stops when it finds the first instance of a selector with an ID, making class differentiation of duplicate IDs impossible. Jan 7, 2010 at 16:06
  • 3
    One reason for doing this may be that class of the element changes and he wants to select element only when it has given class. (Ok, just guessing, but the point is that there may be reason for this). Jan 7, 2010 at 16:07
  • 1
    "I'm pretty sure jQuery stops when it finds the first instance of a selector with an ID" -- I hope and believe that this is not true, since it would defeat point of CSS selector -- all parts of the selector must match, not just ID. What if you are only interested in given element when it has certain class? Your optimization would break this behaviour. Jan 7, 2010 at 16:07

7 Answers 7

18

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?

1
  • Thanks Peter for the quick reply. It actually ended up being a typo with "Light" instead of "light". Both methods you gave ended up working.
    – BAHDev
    Jan 7, 2010 at 16:08
12

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!

2
  • James, I agree with you. Really more of a readability thing in my code, but you're right.. all IDs are unique anyway, so why have to filter them more? My problem ended up being a typo by the way..
    – BAHDev
    Jan 7, 2010 at 16:07
  • 8
    There is the case where you want to do event delegation on an element only when it has a class. Say you have a drag'n'drop element and you only want it to be clickable when it has been given a certain class (via some sort of interaction). Jan 7, 2010 at 16:29
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.

2
  • @Parrots, I do agree. This is more of a readability thing in my code rather than a functional need. Thanks for the advice.
    – BAHDev
    Jan 7, 2010 at 16:09
  • 6
    One reason for doing this may be that class of the element changes and he wants to select element only when it has given class. (Ok, just guessing, but the point is that there may be reason for this). [repeating same comment as above] Jan 7, 2010 at 16:10
3

$(".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.

1
  • Indeed! Another use case, I'm using wildcards in my ID selector [id^=lightbox_flex_field_flex_field_] and need to get class too in some cases to differentiate since users can define field types themselves...
    – rept
    May 26, 2015 at 19:49
1

The easiest way is:

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

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

1

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")

0

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.