jQuery選擇特定元素但是不含特定class (反向選擇器)

在實作 jQuery 選擇器時, 有時會用到選擇出的 elements 不含指定的 class, 有兩種方式實現:

1. not() method ex: $(“div.item”).not(“.red”)
2. :not() seudo-class ex: $(“div.item:not(.red)”)

其中 2. 為 css 原本 selector 的做法.

來看看範例吧:

其中, item 1 ~5 都有 item class, 但 item 2, 3, 4 有 red class, 兩個 button 分別使用 method 1, method 2 來進行切換沒有 red class 的 item 隱藏與顯示 (toggle method).

程式如下:

$("#m1").click(function(){
  $("div.item").not(".red").toggle();
});

$("#m2").click(function(){
  $("div.item:not(.red)").toggle();  
});

參考資料:

https://stackoverflow.com/questions/2448051/how-can-i-select-all-elements-without-a-given-class-in-jquery