Question

我已经尝试过做一些研究但没找到任何东西，但如果我错过了答案，请告诉我。基本上我有多个元素，每个元素有多个类，但组合是唯一的。我想选择某种类的组合，但不要选择其他元素与其他元素结合使用。

我想知道这个选择器是否存在于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取消.d课程：(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选择器做到这一点，缺少使用：不要枚举你想要排除的所有其他课程或者[class =]的一些真正的体操。但是，您可以使用.a.b.c类选择所有元素，然后过滤掉类列表中包含三个以上元素的所有元素：

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()排除不需要的类，而是将其与仅我知道的类匹配元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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选择器：当存在多个类时选择某个类的组合

3 个答案: