jquery - 如何使用 jQuery 过滤不需要的元素

Question

让我们以两个 div 为例，

<div class="main right"></div>
<div class="main"></div>

而这个 jQuery 片段，如下所示：

$('.main').css('background-color','red');

正常情况下，这会将两个 div 的背景颜色更改为红色。我想知道如何更改只有“main”作为类而不是“main right”的 div 的颜色，

Answer 1

$('.main:not(.right)').css('background-color','red');

或者：

$('.main').not('.right').css('background-color','red');

---

如果需要更复杂的条件，可以使用以下filter功能完成：

$('.main').filter(function(){
    return $(this).data('value') == 2 && this.innerHTML.length < 50;
}).css('background-color','red');

它将过滤掉结果.main并只维护它们data-value是 2 和它们的元素innerHTML.length < 50。

---

如果您不知道其他类可能是什么，main但您想要只有main该类的元素。

$('.main').filter(function(){
    return $.trim(this.className) == 'main';
}).css('background-color','red');

Answer 2

使用“not()”选择器。

$('.main:not(.right))
或喜欢：$('.main').not('.right')

Answer 3

在我看来，您想在应用样式之前验证“main”是唯一的类。您可以通过快速正则表达式测试来做到这一点：

$('.main').filter(function(){
    return /^\s*main\s*$/.test(this.className);
}).css('background-color','red');