JQuery Determine if a mapped class has a given identifier

Question

What is jQuery has the id equivalent of the following statement?

$('#mydiv').hasClass('foo') 

so that you can specify the class name and verify that it contains the provided identifier.

something like:

 $('.mydiv').hasId('foo') 

Answer 1

You can bake this logic in a selector by combining several selectors . For example, we could target all elements with a given id that also have a specific class:

 $("#foo.bar"); // Matches <div id="foo" class="bar"> 

It should look like what you are writing in CSS. Please note that this does not apply to all #foo elements (although there should be only one), and it will not apply to all .bar elements (although there may be many). It will only refer to elements that correspond to two attributes.

jQuery also has a great .is method that lets you determine if an element has certain qualities. You can test your jQuery collection against a string selector, HTML element, or other jQuery object. In this case, we just check it against the row selector:

 $(".bar:first").is("#foo"); // TRUE if first '.bar' in document is also '#foo' 

Answer 2

I would probably use $('.mydiv').is('#foo'); If you knew Id, why don't you just apply it to the selector in the first place?

Answer 3

I know his old question, but it's still on top of Google results, new jQuery provides .has() function

 $('.mydiv').has('#foo') 

Answer 4

Let's say that you iterate through some DOM objects and you want to find and catch an element with a specific identifier

 <div id="myDiv"> <div id="fo"><div> <div id="bar"><div> </div> 

You can write something like search

 $('#myDiv').find('#bar') 

Note that if you must use the class selector, the find method will return all matching elements.

or you can write an iteration function that will do more complex work.

 <div id="myDiv"> <div id="fo"><div> <div id="bar"><div> <div id="fo1"><div> <div id="bar1"><div> <div id="fo2"><div> <div id="bar2"><div> </div> $('#myDiv div').each(function() { if($(this).attr('id') == 'bar1') //do something with bar1 }); 

The same code can be easily changed for the class selector.

 <div id="myDiv"> <div class="fo"><div> <div class="bar"><div> <div class="fo"><div> <div class="bar"><div> <div class="fo"><div> <div class="bar"><div> </div> $('#myDiv div').each(function() { if($(this).hasClass('bar')) //do something with bar }); 

I'm glad you solved your problem with index (), which ever works for you. I hope this helps others with the same problem. Greetings :)

Answer 5

 $('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ }); 

Answer 6

Just to say that I finally solved this using index ().

NOTHING worked otherwise.

So, for sibling elements, this is a good job if you first select a generic class and then want to change something differently for each specific one.

EDIT: for those who don't know (like me) index () gives the index value for each element that matches the selector, counting from 0, depending on their order in the DOM. As long as you know how many elements there are with class = "foo", you do not need an identifier.

Obviously, this will not always help, but to some it may seem useful.

Answer 7

Check if item id exists

 if ($('#id').attr('id') == 'id') { //OK } 

Answer 8

You can also check if the id element is used:

 if(typeof $(.div).attr('id') == undefined){ //element has no id } else { //element has id selector } 

I use this method for global dataTables and specific ordered dataTables