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

【问题标题】：How to filter undesired elements with jQuery如何使用 jQuery 过滤不需要的元素
【发布时间】：2012-05-15 01:36:42
【问题描述】：

让我们以两个 div 为例，

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

还有这个jQuery sn-p，如下：

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

这将像往常一样将两个 div 的背景颜色更改为红色。我想知道如何更改只有“main”作为类而不是“main right”的 div 的颜色，

【问题讨论】：

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

【讨论】：

【解决方案2】：

使用“not()”选择器。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：