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

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