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

Question

如何才能在jQuery上執行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僞類，：not（X），是一個函數表示法，它將一個簡單的選擇器X作爲參數。它匹配不是由參數表示的元素。 X不得包含另一個否定選擇符或任何僞元素。