确定匹配的类是否具有给定的 id

JQuery 的 id 等价于下面的语句是什么?

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

这样您就可以给出一个类名并检查它是否包含提供的 id。

比如:

$('.mydiv').hasId('foo')
170130 次浏览

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?

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

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'

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.

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

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>

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