jQuery Determine if a matched class has a given id

What is jQuery has id equivalent of the following statement?

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

so you could give a class name and check that it contains a supplied id.

something like:

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

You can bake that logic into the selector by combining multiple selectors. For instance, we could target all elements with a given id, that also have a particular class:

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

This should look similar to something you'd write in CSS. Note that it won't apply to all #foo elements (though there should only be one), and it won't apply to all .bar elements (though there may be many). It will only reference elements that qualify on both attributes.

jQuery also has a great .is method that lets your determine whether an element has certain qualities. You can test a jQuery collection against a string selector, an HTML Element, or another jQuery object. In this case, we'll just check it against a string selector:

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

I would probably use $('.mydiv').is('#foo'); That said if you know the Id why wouldnt you just apply it to the selector in the first place?

update: sorry misunderstood the question, removed .has() answer.

another alternative way, create .hasId() plugin

// the plugin
$.fn.hasId = function(id) {
  return this.attr('id') == id;
};

// select first class
$('.mydiv').hasId('foo') ?
  console.log('yes') : console.log('no');

// select second class
// $('.mydiv').eq(1).hasId('foo')
// or
$('.mydiv:eq(1)').hasId('foo') ?
  console.log('yes') : console.log('no');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

Let's say that you're iterating through some DOM objects and you wanna find and catch an element with a certain ID

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

You can either write something like to find

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

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

or you could write an iterating function that will do more advanced 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
});

Same code could be easily modified for 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(), what ever works for you.I hope this will help others with the same problem. Cheers :)

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

Just to say I eventually solved this using index().

NOTHING else seemed to work.

So for sibling elements this is a good work around if you are first selecting by a common class and then want to modify something differently for each specific one.

EDIT: for those who don't know (like me) index() gives an 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 don't need an id.

Obviously this won't always help, but someone might find it useful.

Check if element's ID is exist

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

You could also check if the id element is used by doing so:

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