Pytanie Czy istnieje funkcja "exist" dla jQuery?


Jak mogę sprawdzić istnienie elementu w jQuery?

Obecny kod, który mam to:

if ($(selector).length > 0) {
    // Do something
}

Czy istnieje bardziej elegancki sposób podejścia do tego? Być może wtyczka lub funkcja?


2330
2017-08-27 19:49


pochodzenie




Odpowiedzi:


W JavaScript wszystko jest "prawdą" lub "fałszerstwem" i liczbami 0 (i NaN) oznacza false, wszystko inne true. Więc możesz napisać:

if ($(selector).length)

Nie potrzebujesz tego >0 część.


2072
2018-02-25 19:16



spowoduje to błąd, jeśli użyjesz selektora Id, jeśli element nie istnieje. sprawdź różne testy, które wykonałem ... w mojej odpowiedzi - abhirathore2006
@ abhirathore2006 Jeśli używasz selektora id, a element nie istnieje, wówczas długość wynosi 0 i nie powoduje wyjątków. - Robert
wystarczająco ciekawe NaN != false. - Robert
@Robert i [] + [] = ""... ahh Uwielbiam javascript - James
@deblocker Oto wideo Myślę, że ci się spodoba! - James


Tak!

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

Jest to odpowiedź na: Podcast Herding Code z Jeffem Atwoodem


1247
2017-08-27 19:50



Po prostu napisz: if ($ (selector) .length) {...} bez "> 0" - vsync
Twój $.fn.exists Przykładem jest zastąpienie wyszukiwania właściwości (taniej!) dwoma wywołaniami funkcji, które są znacznie droższe - i jedno z tych wywołań funkcji odtwarza obiekt jQuery, który już masz, co jest po prostu głupie. - C Snover
@redsquare: Czytelność kodu jest najlepszym uzasadnieniem dodawania tego rodzaju funkcji w jQuery. Posiadanie czegoś zwanego .exists czyta czysto, natomiast .length czyta się jako coś odmiennego semantycznie, nawet jeśli semantyka pokrywa się z identycznym wynikiem. - Ben Zotto
@quixoto, przepraszam, ale .length jest standardem w wielu językach, które nie wymaga pakowania. Jak inaczej interpretujesz. Długość? - redsquare
Moim zdaniem, jest to przynajmniej jedno logiczne przekierowanie od pojęcia "długość listy, która jest większa od zera" do pojęcia "elementu (ów), który napisałem selektor dla istnienia". Tak, to technicznie rzecz biorąc to samo, ale konceptualna abstrakcja jest na innym poziomie. To powoduje, że niektórzy ludzie wolą bardziej jednoznaczny wskaźnik, nawet przy niektórych kosztach wydajności. - Ben Zotto


Jeśli użyłeś

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

Sugerowałbyś, że łańcuchowanie było możliwe, gdy tak nie jest.

Byłoby lepiej:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

Alternatywnie, z FAQ:

if ( $('#myDiv').length ) { /* Do something */ }

Można również użyć następujących. Jeśli nie ma żadnych wartości w tablicy obiektów jQuery, to pobranie pierwszego elementu tablicy zwróci wartość undefined.

if ( $('#myDiv')[0] ) { /* Do something */ }

324
2018-01-14 19:46



Pierwsza metoda jest lepsza. $ ("a"). exists () brzmi "jeśli istnieją elementy <a>". $ .exists ("a") brzmi "jeśli istnieje <a> elementów". - strager
prawda, ale znowu, sugerujesz, że łańcuchowanie jest możliwe i gdybym spróbował zrobić coś takiego jak $ (selektor) .exists (). css ("color", "red") to by nie działało i wtedy byłbym = * ( - Jon Erickson
Istnieją już metody, które nie są przenośne, takie jak attr i funkcje danych. Widzę jednak twój punkt widzenia i, o ile jest to warte, po prostu testuję na długość> 0. - Matthew Crumley
Dlaczego, do diabła, musiałbyś to połączyć? $(".missing").css("color", "red") już robi to, co trzeba ... (to znaczy nic) - Ben Blank
Rzeczy związane z łańcuchem są kompletne - są dużo z jQuery $.fn metody, które zwracają coś innego niż nowy obiekt jQuery, a zatem nie łączą się. - Alnitak


Możesz użyć tego:

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }

98
2018-04-03 12:17



Nie widzisz, że Tim Büthe już to zrobił odpowiedź 2 lata przed tobą? - Th4t Guy
Pfft, Tim nigdy nie pokazał, jak przetestować, czy element nie istnieje. - Jeremy W
Masz na myśli życie "jeszcze"? Moje Q to: err, musi istnieć lub selektor się nie zgadza. Długość jest zbędna. - RichieHH
ta odpowiedź i komentarze podsumowują działanie stackoverflow - aswzen


Najszybszym i najbardziej semantycznie samozwańczym sposobem sprawdzenia istnienia jest użycie zwykłego JavaScript:

if (document.getElementById('element_id')) {
    // Do something
}

Jest nieco dłuższy czas zapisu niż wariant długości jQuery, ale działa szybciej, ponieważ jest natywną metodą JS.

I to jest lepsze niż alternatywa pisania własnej funkcji jQuery. Ta alternatywa jest wolniejsza, z powodów podanych przez @snover. Ale dałoby to również innym programistom wrażenie, że funkcja exist () jest czymś nieodłącznym dla jQuery. JavaScript powinien / powinien być zrozumiany przez innych edytujących twój kod, bez zwiększonego zadłużenia wiedzy.

NB: Zwróć uwagę na brak "#" przed elementem id (ponieważ jest to zwykły JS, a nie jQuery).


73
2018-01-11 12:27



Zupełnie nie to samo. Selektory JQuery mogą być używane dla dowolnej reguły CSS - na przykład $('#foo a.special'). I może zwrócić więcej niż jeden element. getElementById nie mogę zacząć tego podejścia. - kikito
Masz rację, ponieważ nie jest tak szeroko stosowany jako selektory. Wykonuje jednak całkiem dobrze zadanie w najczęstszym przypadku (sprawdzając, czy istnieje jeden element). Argumenty samoświadomości i szybkości wciąż trwają. - Magne
@Noz if(document.querySelector("#foo a.special")) pracowałbym. Nie wymaga jQuery. - Blue Skies
Argument prędkości w silnikach JS jest martwy tylko w umyśle ludzi, którzy nie mogą funkcjonować bez jQuery, ponieważ jest to argument, którego nie mogą wygrać. - Blue Skies
Pamiętasz stare dobre czasy, kiedy dokument.getElementById było wszystkim, co mieliśmy? I zawsze zapomniałem o dokumencie. i nie mógł zrozumieć, dlaczego to nie zadziałało. Zawsze pisałem błędnie i źle wyglądałem. - JustJohn


Możesz zapisać kilka bajtów, pisząc:

if ($(selector)[0]) { ... }

Działa to, ponieważ każdy obiekt jQuery maskuje również jako tablicę, więc możemy użyć operatora wyłuskującego tablicę, aby uzyskać pierwszy element z szyk. Powraca undefined jeśli nie ma elementu pod określonym indeksem.


53
2018-01-18 09:04



Przyszedłem tutaj, aby opublikować dokładną odpowiedź ... obowiązkowe skrzypce: jsfiddle.net/jasonwilczak/ekjj80gy/2 - JasonWilczak
@JasonWilczak Troska o komentarz, dlaczego nie: .eq [0] lub .first () w odniesieniu do pierwszego znalezionego elementu, a nie odlewania typu? - Jean Paul A.K.A el_vete
Nie, jQuery.first() lub jQuery.eq(0) zarówno zwracane obiekty, obiekty są prawdą, nawet jeśli są puste - ish. Ten przykład powinien zilustrować, dlaczego te funkcje nie mogą być używane tak jak jest: if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists") - Salman A
Poprawny. .eq(0) zwraca tylko inny obiekt jQuery skracany do długości 1 lub 0. .first() jest po prostu wygodną metodą dla .eq(0). Ale .get(0) zwraca pierwszy element DOM lub undefinedi jest taki sam jak [0]. Pierwszy element DOM w obiekcie jQuery jest przechowywany w zwykłej właściwości obiektu o nazwie '0'. To prosty dostęp do nieruchomości. Jedyny rodzaj rzutowania wynika z niejawnej konwersji liczby 0 na ciąg '0'. Więc jeśli rzutowanie typu jest problemem, którego możesz użyć $.find(selector)['0'] zamiast. - Robert


Możesz użyć:

if ($(selector).is('*')) {
  // Do something
}

ZA mało może bardziej elegancko.


50
2017-09-17 17:53



To zbyt dużo dla tak prostej rzeczy. zobacz odpowiedź Tima Büthe'a - vsync
To jest poprawna odpowiedź. Metoda "length" ma problem z tym, że daje fałszywy alarm z dowolną liczbą, na przykład: $ (666) .length // zwraca 1, ale nie jest to prawidłowy selektor - earnaz
Jest to bardzo kosztowne dla bardzo prostego zadania. Wystarczy spojrzeć na implementację jquery, jeśli .is (), a zobaczysz, ile kodu potrzebuje do przetworzenia, aby odpowiedzieć na to proste pytanie. Również nie jest oczywiste, co dokładnie chcesz zrobić, więc jest to takie samo lub może mniej eleganckie niż rozwiązanie, o którym mowa. - micropro.cz
@earnaz świetny punkt, ładny połów. Nie widzę jednak, gdzie to naprawdę jest warte uwagi. Devs identyfikujące elementy za pomocą 666 prawdopodobnie mają wiele innych powodów, dla których ich kod jest uszkodzony. Chociaż jest to nieprawidłowy selektor, $ (666) .length jest prawidłowym javascript: Ocenia to jako prawda, a zatem powinien spełniają warunek. - Todd
@earnaz, aby uniknąć tego konkretnego przypadku, $.find(666).length Prace. - Emile Bergeron