如何在纯JavaScript中使用jQuery方法'not()‘？

Question

如何在javascript上执行jQuery not？

<div id='outerdiv'>
    <div class='class-1'></div>
    <div class='class-2'></div>
    <div class='class-3'></div>
    <div class='class-4'></div>
    <div class='news'></div>
</div>

$('#outerdiv').not('.news').css('background-color', 'red');

我想排除一些可以使用jQuery not执行的元素，但目前，我希望它在javascript上。

Answer 1

即使使用jQuery，给定的代码也不会产生预期的效果。

jQuery中的not方法过滤匹配的元素集，以排除那些匹配条件的元素。Example $(".animal").not(".dog")最初匹配任何动物，然后进行过滤以排除狗。过滤结束时的有效jQuery对象仍将包括其他动物，但不再包括狗。这不会执行任何DOM树搜索，也不会考虑后代。选择器将应用于原始匹配集中的每个元素，如果匹配，则排除该元素。

在您的示例中，为了突出显示除新闻之外的所有子<div>，The correct way (jsFiddle)将选择所有子<div>元素，然后过滤：

$('#outerdiv > div').not('.news').css('background-color', 'red');

要在(非框架增强的) JS中重现这段代码，请尝试(jsfiddle)：

var divs = document.querySelectorAll('#outerdiv > div:not(.news)');

for (var i=0; i < divs.length; i++) {
    divs[i].style.backgroundColor = 'red';
}

:not() pseudo-element selector是一个CSS3选择器，用于过滤匹配的元素。然而，它比jQuery的.not()有更多的限制，而且它只允许在其中嵌套某些选择器。从MDN文档：

否定CSS伪类：

(X)是一个以简单选择器X作为参数的函数表示法。它与未由参数表示的元素匹配。X不能包含另一个否定选择器，也不能包含任何伪元素。

Answer 2

如果你想用原始的javascript达到同样的效果，你可以尝试这样做：

[].forEach.call(document.querySelectorAll("#outerdiv div:not(.news)"), function (value, index, array) {
    value.style.backgroundColor = "red";
});

另请参阅：

实时节点列表和非实时节点列表之间的差异。看看

Answer 3

如果我理解您想要什么( This is probably what you meant to be your example )，我认为您的示例jquery可能有错误。

你可以这样做：

example link

Javascript：

    // Find the correct table...
var table = document.getElementById("mytable"),
    // Find all the td's inside it...
    td = table.getElementsByTagName("td");

// Loop through each td inside the table...
for ( var i=0; i < td.length; i++ ) {

    // If td has a class that is anything but .exclude...
    if ( td[i].className !== 'exclude' ) { 

        // Add class to all non-excluded elements
        td[i].className = "mark";

    }

}

Html：

<table id="mytable">
    <tr>
        <td>td-1</td>
        <td>td-2</td>
    </tr>
    <tr>
        <td class="exclude">td-3</td>
        <td>td-4</td>
    </tr>
    <tr>
        <td>td-5</td>
        <td>td-6</td>
    </tr>
</table>

Css：

.mark { color: red; }