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

Question

什么是jQuery具有相当于以下语句的id？

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

所以你可以给一个类名并检查它是否包含一个提供的id.

就像是:

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

Answer 1

您可以通过组合多个选择器将该逻辑烘焙到选择器中.例如,我们可以定位具有给定id的所有元素,它们也具有特定的类:

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

这应该与您在CSS中编写的内容类似.请注意,它不适用于所有#foo元素(尽管应该只有一个),并且它不适用于所有.bar元素(尽管可能有很多元素).它只会引用符合这两个属性的元素.

jQuery还有一个很好的.is方法,可以让你确定一个元素是否具有某些特质.您可以针对字符串选择器,HTML元素或其他jQuery对象测试jQuery集合.在这种情况下,我们只需对字符串选择器进行检查:

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

Answer 2

我可能会使用$('.mydiv').is('#foo');那说如果你知道Id为什么你不会只是首先将它应用于选择器？

Answer 3

更新:抱歉误解了问题,删除了.has()答案.

另一种方法,创建.hasId()插件

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

Answer 4

假设您正在迭代某些DOM对象,并且您想要找到并捕获具有特定ID的元素

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

你可以写一些喜欢找的东西

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

请注意,如果您要使用类选择器,则find方法将返回所有匹配元素.

或者你可以编写一个迭代函数来完成更高级的工作

<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
});

可以为类选择器轻松修改相同的代码.

<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
});

我很高兴你用index()解决了你的问题,什么对你有用.我希望这能帮助其他人解决同样的问题.干杯:)