jquery - 在 jQuery 中选择具有多个类的元素

Question

我想选择一个有几个类的元素

类似这样的 HTML:

<div class="myclass fclass sclass tclass"></div>
<div class="myclass tclass"></div>
<div class="myclass sclass tclass"></div>
<div class="myclass fclass tclass"></div>
<div class="myclass fclass sclass tclass"></div>

我只想选择具有 myclass tclass 类的元素。

我真的不想以一种我必须了解每个类的方式来做这件事，就像这样:

$(".myclass.tclass").not(".fclass, .sclass")

Answer 1

作为具有命名函数的回调可能效果不佳(如果您需要使用不同的类类型完成它)，但演示显示它可以工作:

$('.myclass.tclass').filter(match_exact_class);

function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 2;
}

http://jsfiddle.net/userdude/9bc4qjn4/1

作为单个调用:

$('.myclass.tclass').filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 2;
});

$('.myclass.tclass.sclass').filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 3;
});

$('.myclass.tclass.tclass.sclass').filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 4;
});

我怀疑您可以滚动一个简单的插件或自定义选择器，然后在选择器上进行拆分，例如:

var selector = '.myclass.tclass.tclass.sclass',
    sel_match = selector.split('.').length;

$(selector).filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == sel_match;
});

简单的自定义选择器:

jQuery.extend(jQuery.expr[':'], {
    matcls: function(elem, i, match){
        return elem.className.split(/\s+/).length == match[3].split(/\s+/).length;
    }
});

console.log($('div:matcls("myclass tclass")'));

http://jsfiddle.net/userdude/9bc4qjn4/4