Selektor jQuery „wszystko, ale nie”

89

Mogę wybrać (używając jQuery) wszystkie elementy div w znaczniku HTML w następujący sposób:

$('div')

Ale chcę wykluczyć konkretny div(powiedzmy mający id="myid") z powyższego wyboru.

Jak mogę to zrobić za pomocą funkcji JQuery?

javascript jquery jquery-selectors siva636
źródło
2
użyj selektora not w jquery
abhijit

Odpowiedzi:

171

Prosty:

$('div').not('#myid');

Użycie .not()spowoduje usunięcie elementów dopasowanych przez nadany mu selektor ze zbioru zwróconego przez $('div').

Możesz także użyć :not()selektora:

$('div:not(#myid)');

Oba selektory robią to samo, jednak :not()jest szybsze , prawdopodobnie dlatego, że silnik selektora jQuery, Sizzle, może zoptymalizować go do .querySelectorAll()wywołania natywnego .

Bojangles
źródło
1
@Raynos Myślę, że niekoniecznie jest to złe , ale używanie .not()jest o wiele lepsze niż :not().
Bojangles
1
Myślę, że powinno być $('div:not(#myid)');(bez cudzysłowów). @Raynos: Dlaczego? :not()to selektor CSS3. jQuery może bezpośrednio przekazać selektor, querySelectorAlljeśli jest obsługiwany ...
Felix Kling
@FelixKling jest w porządku jako część selektorów4 . Jednak w jQuery jest wtedy wolniejszy .noti mniej czytelny. Powinienem był powiedzieć „: nie selektor w jQuery”
Raynos
@Raynos: Żadna specyfikacja Selectors nigdy nie zezwalała na cudzysłowy w obrębie :not(). Również ten selektor nie jest nowy w Selectors 4, ani nie został zmieniony, aby umożliwić cytowanie. Został jednak zmieniony, aby umożliwić bardziej złożone selektory. Chyba że źle zrozumiałem twój komentarz ...
BoltClock
1
@PeterKrauss Właśnie wykonałem test porównawczy jsPerf, który jest ocenianyquerySelectorAll jako najszybszy. Nie jest to prawdziwy wzorzec, ale należy się tego spodziewać, biorąc pod uwagę, że nie ma narzutu z wewnętrznego jQuery. :not()jest w rzeczywistości szybszy, prawdopodobnie dlatego, że Sizzle wie, że może go zoptymalizować pod kątem użyciaquerySelectorAll()
Bojangles
9 
var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);

Możesz to po prostu zrobić w staroświecki sposób. Nie ma potrzeby korzystania z jQuery z czymś tak prostym.

Wskazówki dla profesjonalistów:

Zestaw elementów dom to po prostu tablica, więc użyj swojej ulubionej toArraymetody na NodeList.

Dodanie elementów do zestawu to po prostu

set.push.apply(set, arrOfElements);

Usunięcie elementu z zestawu to

set.splice(set.indexOf(el), 1)

Nie możesz łatwo usunąć wielu elementów naraz :(

Raynos
źródło
1
Być może w dzisiejszych czasach (2017) korzystanie z natywnego Javascript .querySelector()lub .querySelectorAll()z div:not(#myid) jest szybsze ... Czy tak?
Peter Krauss,
8 
$("div:not(#myid)")

[doc]

lub

$("div").not("#myid")

[doc]

to główne sposoby wyboru wszystkich identyfikatorów oprócz jednego

Możesz zobaczyć demo tutaj

geneza
źródło
Dzisiaj (2017) być może $("div:not(#myid)") jest szybsze ... Sprawdź optymalizację sizzlejs , korzystając z natywnego JavaScript .querySelector()lub .querySelectorAll().
Peter Krauss
4 
   var elements =  $('div').not('#myid');

Obejmie to wszystkie elementy div z wyjątkiem tego o identyfikatorze „myid”

Ehtesham
źródło
3 
$('div:not(#myid)');

myślę, że to jest to, czego potrzebujesz.

abhijit
źródło
3

Że należy to zrobić:

$('div:not("#myid")')
iappwebdev
źródło
3

Używasz .notwłaściwości biblioteki jQuery:

$('div').not('#myDiv').css('background-color', '#000000');

Zobacz to w akcji tutaj . Element div #myDiv będzie biały.

Kyle
źródło