jQuery选择器：当多个存在时选择特定的类组合答案

【问题标题】：jQuery selector: Selecting a certain combination of classes when multiple existjQuery选择器：当多个存在时选择特定的类组合
【发布时间】：2015-02-17 23:09:47
【问题描述】：

我已经尝试做一些研究，但没有找到任何东西，但如果我错过了答案，请告诉我。基本上我有多个元素，每个元素都有多个类，但组合是独一无二的。我想选择特定的类组合，但不选择具有此元素与其他元素组合的其他元素。

我想知道这个选择器是否存在于 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> ]

感谢任何指导。谢谢！

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案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。只是把它作为一种选择。

【讨论】：

【解决方案2】：

我不相信你可以使用直接的 CSS 选择器来做到这一点，除了使用 :not 来枚举你希望排除的所有其他类或使用 [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;
  });
}

【讨论】：

感谢您的回答，但另一个更适合我的需要。
没问题！我的适用于您不知道其他类可能是什么的情况；如果您确切地知道它们是什么，那么第一个更好。

【解决方案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');

【讨论】：