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

Question

让我们举两个div，

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

这个jQuery片段，如下：

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

这会将divs background-color更改为红色，正常情况下。我想知道如何改变那些只有“主”作为类的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”是 only 类。您可以通过快速正则表达式测试来完成此操作：

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