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

如果你想用原始javascript获得相同的结果，你可以尝试这样的事情：

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

jsFiddle

另见：

1) Document.querySelectorAll MDN
2) The negation CSS pseudo-class :not(X)

实时和非实时节点列表之间的区别。看jsFiddle

Answer 2

我认为你的示例jquery可能有错误，如果我理解了你想要的东西（This is probably what you meant to be your example）。

你可以这样做：

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

Answer 3

即使你使用jQuery，你给定的代码也没有预期的效果。

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

在您的示例中，

The correct way (jsFiddle)要突出显示除新闻之外的所有子<div>，是选择所有子<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是一个CSS 3选择器，用于过滤匹配的元素。它比jQuery的.not()更受限制，它只允许某些选择器嵌套在其中。来自MDN文档：

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

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

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

4 个答案:

Shim

演示