Question

在jQuery中，如何过滤包含某个类的所有内容？

HTML：

<div class='item 10'>10</div>
<div class='item 20'>20</div>
<div class='item 30'>30</div>
<div class='item 40'>40</div>
<div class='not-an-item 50'>50</div>

我尝试了什么：

var classList = $(".item").attr('class').split(/\s+/);
if(classList[1] == '10' || lassList[1] == '30'){
    $(".item").hide();

}

正确输出：

<div class='item 20'>20</div>
<div class='item 40'>40</div>
<div class='not-an-item 50'>50</div>

Answer 1

您可以使用.has()方法或.not()方法来减少元素集。使用.has()保留与特定选择器匹配的所有元素，而.not()保留与选择器不匹配的所有元素。

要进行更高级的过滤，您可以使用.filter()方法。

如果我正确理解您的问题，您可以将.filter()与过滤功能结合使用。像这样：

$(".item").filter(function() {
   return !($(this).hasClass("10") || $(this).hasClass("30"));
}).hide();

Answer 2

function hideItem(target) {
    $('div.item').filter(function() {
        var num = parseInt( this.className.split(/\s/)[1], 10 );
        if(target instanceof Array) {
          return $.inArray(num, target) >= 0; 
        } else return num > target;  
    }).hide();
}
hideItem([10,30]); // will hide item with class 10 and 30 
                   // and you can give any number of class

但是如果你想隐藏item类> 20（假设），那么就这样称呼它;

hideItem(20);

Answer 3

你可以尝试这样..

$("div.item").hide();
$("div.item").not('div.10, div.30').show();

<强> FIDDLE DEMO

包含特定值的jQuery过滤器类

3 个答案: