CODEWITHSUNDEEP
jqueryjquery-selectorscss-selectors
BAHDev
BAHDev

Reputation: 835

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

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.

Upvotes: 14

Views: 39138

Answers (8)

arresteddevelopment
arresteddevelopment

Reputation: 413

This is absolutely a valid requirement. I have no idea why people would think otherwise.

If you have code on a button that fires referencing the unique ID, and you disable the button with a class styling, you don't want the code to fire unless the combination of class and ID are correct.

In that case you might want to use an ID AND class selector to ensure the button is not disabled.

Upvotes: 1

Angus Walker
Angus Walker

Reputation: 398

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

Upvotes: 1

Thermech
Thermech

Reputation: 4451

The easiest way is:

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

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

Upvotes: 1

user1610157
user1610157

Reputation: 61

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

Upvotes: 3

Brian Kirkpatrick
Brian Kirkpatrick

Reputation: 151

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

Upvotes: 0

Mutation Person
Mutation Person

Reputation: 30498

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!

Upvotes: 12

Parrots
Parrots

Reputation: 26872

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.

Upvotes: 3

Peter Štibran&#253;
Peter Štibran&#253;

Reputation: 32893

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?

Upvotes: 18

Related Questions