如何在纯JavaScript中使用jQuery方法'not（）'？

Question

jQuery如何not在javascript上执行？

<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方法过滤匹配的元素集以排除那些符合条件的元素 。 示例$(".animal").not(".dog")最初与任何动物匹配，然后被过滤以排除狗。 过滤结束时有效的jQuery对象仍将包含其他动物，但将不再包含狗。 这不会进行任何DOM树搜索，也不会考虑后代。 选择器将应用于原始匹配集中的每个元素，并且如果该元素匹配则将其排除。

在您的示例中，突出显示除新闻以外的所有子<div>的正确方法（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()伪元素选择器是CSS 3选择器，用于过滤匹配的元素。 它比jQuery的.not()更受限制，并且它只允许某些选择器嵌套在其中。 从MDN文档中：

否定CSS伪类：not（X）是一种功能表示法，采用简单的选择器X作为参数。 它与参数未表示的元素匹配。 X不得包含另一个否定选择器或任何伪元素。

Answer 2

如果您想使用原始javascript实现相同的结果，则可以尝试如下操作：

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

的jsfiddle

还要看：

1）Document.querySelectorAll MDN
2）否定CSS伪类：not（X）

---

活动和非活动节点列表之间的区别。 看看jsFiddle

Answer 3

我认为您的示例jquery可能有一个错误，如果我理解您想要的（ 这可能就是您作为示例的意图 ）。

您可以执行以下操作：

示例链接

使用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; }

Answer 4

也许您在寻找垫片？

沉

这是一个模仿本地行为的功能。

试试我的shim为jQuery.not() ：

function not($list, element) {
    const list = Array.from($list);
    const index = list.indexOf(element);
    return list.slice(index);
}

演示

https://gist.github.com/piecioshka/5a9fa52f1c3f90aed97bfb8e0caa8335