jQuery选择器：存在多个时选择类的某个组合

Question

我已经尝试进行一些研究，但没有找到任何答案，但如果我错过了答案，请告诉我。基本上我有多个元素，每个元素有多个类，但组合是独一无二的。我想要 select 类的某种组合，但不想将此元素与其他元素组合。

我想知道这个 selector 是否存在于 jQuery 中，或者是否有其他方法可以完成我正在解释的内容。请参阅以下示例：

<div class="a b c"></div>
<div class="a b c d"></div>
<div class="a b c d">/div>

当尝试仅记录带有类 a b c 的元素时，我尝试使用：

$('.a.b.c').each( function() {
    console.log($(this));
}

输出为：

[ <div class="a b c">...</div> ,
<div class="a b c d">...</div ,
<div class="a b c d">...</div> ]

我正在寻找输出为：

[ <div class="a b c">...</div> ]

感谢任何指导。谢谢！

Answer 1

您可以使用 CSS3 :not() pseudo class to negate the .d class: (example)

$('.a.b.c:not(.d)').each( function() {
    console.log($(this));
});

jQuery还有一个.not() method: (example)

$('.a.b.c').not('.d').each( function() {
    console.log($(this));
});

您还可以使用属性选择器：(example)

[class="a b c"]

请注意，顺序必须始终为 a b c。只是把它作为一个选项扔在那里。

Answer 2

我不相信你可以用直接的 CSS selector 来做到这一点，除非使用 :not to enumerate every other class 你想排除或一些真正的体操[class=]。但是，您可以做的是 select 所有带有 .a.b.c class 的元素，然后过滤掉任何在其 class 列表中具有三个以上元素的元素：

var $abcDivs = $('.a.b.c').filter(function(i, $elem){
  return $elem.attr("class").split(' ').length == 3;
})

更一般地说：

function exactClass(classList) {
  return $(classList.join('.')).filter(function(i, $elem){
    return $elem.attr("class").split(' ').length == classList.length;
  });
}

Answer 3

我刚才一直在寻找类似的东西，但我无法猜出什么类我不需要（因为它们是动态附加的）。所以，我没有用 not() 排除不需要的类，而是用我知道的类匹配元素。

var classes = ['a','c','b'];

$('.'+classes.join('.')).each( function(){
  var cl = $(this).attr('class');
  for(var i in classes) {
    cl = cl.split(classes[i]).join('');
  }
  if(cl.replace(/\s+/, '') === ''){
    $(this).addClass('blah');
  }
});

.blah{
    font-size:30px;
    color : red;
}

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

<div class="a b c d">Foo</div>
<div class="c b a">Bar</div>
<div class=" a b  c">Hello</div>
<div class=" a b">World</div>

JSFiddle。作为方法：

function el(c){
    var a = [];
    $('.'+c.join('.')).each(function(){
        var k = $(this).attr('class');
        for(var i in c) k=k.split(c[i]).join('');
        if(k.replace(/\s+/,'')==='') a.push(this);
    });
    return a;
}

// usage:
$(el(['a','c','b'])).addClass('blah');

jQuery选择器：存在多个时选择类的某个组合

jQuery selector: Selecting a certain combination of classes when multiple exist

javascript

jquery

jquery-selectors