Gibt es eine Funktion "existiert" für jQuery?

Wie kann ich die Verfügbarkeit von Artikeln in jQuery überprüfen?

Der aktuelle Code, den ich habe, lautet wie folgt:

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

Gibt es einen eleganteren Weg, um dies zu erreichen? Vielleicht ein Plugin oder eine Funktion?

2475
27 авг. von Jake McGraw am 27. August eingestellt 2008-08-27 22:49 08 um 22:49 Uhr 2008-08-27 22:49
@ 40 Antworten
  • 1
  • 2

In JavaScript ist alles "wahr" oder "falsch", und für Zahlen 0 (und NaN) bedeutet dies " false , alles andere ist " true . Deshalb können Sie schreiben:

 if ($(selector).length) 

Sie benötigen diesen Teil nicht >0 .

2204
25 февр. Die Antwort gibt Tim Büthe vom 25. Februar. 2009-02-25 22:16 09 um 22:16 Uhr 2009-02-25 22:16

Ja

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

Dies ist eine Antwort auf: Podcast mit Jeff Atwood bevormunden

1289
27 авг. Die Antwort wird von Jake McGraw am 27. August gegeben. 2008-08-27 22:50 08 um 22:50 Uhr 2008-08-27 22:50

Wenn du benutzt hast

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

Sie würden damit meinen, dass die Kette möglich wäre, wenn nicht.

Es wäre besser:

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

Als Alternative zu häufig gestellten Fragen :

 if ( $('#myDiv').length ) {  } 

Sie können auch Folgendes verwenden. Wenn das Array von jQuery-Objekten keine Werte enthält, wird das Abrufen des ersten Elements im Array undefined zurückgegeben.

 if ( $('#myDiv')[0] ) {  } 
346
14 янв. Antwort an Jon Erickson 14. Januar 2009-01-14 22:46 09 um 22:46 Uhr 2009-01-14 22:46

Sie können dies verwenden:

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

 // if element does not exist if(!$('selector').length){  } 
113
03 апр. Antwort von Yanni 03 Apr 2011-04-03 15:17 '11 am 15:17 2011-04-03 15:17

Der schnellste und semantisch verständlichste Weg, um zu überprüfen, ob tatsächlich einfaches JavaScript verwendet wird:

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

Dies ist etwas länger als die Alternative zu jQuery, aber es läuft schneller, weil es eine JS-eigene Methode ist.

Und das ist besser als eine Alternative zum Schreiben Ihrer eigenen jQuery-Funktion. Diese Alternative ist aus Gründen von @snover >

Hinweis Beachten Sie das Fehlen eines "#" vor element_id (da dies eine einfache JS ist, nicht jQuery).

82
11 янв. Die Antwort wird Magne 11 Januar gegeben. 2012-01-11 15:27 '12 am 15:27 2012-01-11 15:27

Sie können einige Bytes speichern, indem Sie schreiben:

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

Dies funktioniert, da jedes jQuery-Objekt auch als Array maskiert ist. Daher können Sie den Array-Dedifferenzierungsoperator verwenden, um das erste Element aus dem Array abzurufen. Es wird undefined wenn der angegebene Index kein Element enthält.

58
18 янв. Die Antwort wird am 18. Januar von Salman A gegeben 2014-01-18 12:04 '14 am 12:04 2014-01-18 12:04

Sie können verwenden:

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

Etwas eleganter vielleicht.

54
17 сент. Antwort von Devon 17. September 2008-09-17 20:53 08 um 20:53 Uhr 2008-09-17 20:53

Dieses Plugin kann in einem if Ausdruck wie if ($(ele).exist()) { } oder Callbacks verwendet werden.

Plugin

 ;;(function($) { if (!$.exist) { $.extend({ exist: function() { var ele, cbmExist, cbmNotExist; if (arguments.length) { for (x in arguments) { switch (typeof arguments[x]) { case 'function': if (typeof cbmExist == "undefined") cbmExist = arguments[x]; else cbmNotExist = arguments[x]; break; case 'object': if (arguments[x] instanceof jQuery) ele = arguments[x]; else { var obj = arguments[x]; for (y in obj) { if (typeof obj[y] == 'function') { if (typeof cbmExist == "undefined") cbmExist = obj[y]; else cbmNotExist = obj[y]; } if (typeof obj[y] == 'object'  obj[y] instanceof jQuery) ele = obj[y]; if (typeof obj[y] == 'string') ele = $(obj[y]); } } break; case 'string': ele = $(arguments[x]); break; } } } if (typeof cbmExist == 'function') { var exist = ele.length > 0 ? true : false; if (exist) { return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); }); } else if (typeof cbmNotExist == 'function') { cbmNotExist.apply(ele, [exist, ele]); return ele; } else { if (ele.length <= 1) return ele.length > 0 ? true : false; else return ele.length; } } else { if (ele.length <= 1) return ele.length > 0 ? true : false; else return ele.length; } return false; } }); $.fn.extend({ exist: function() { var args = [$(this)]; if (arguments.length) for (x in arguments) args.push(arguments[x]); return $.exist.apply($, args); } }); } })(jQuery); 

jsFiddle

Sie können einen oder zwei Rückrufe angeben. Der erste funktioniert, wenn das Element vorhanden ist, der zweite funktioniert, wenn das Element nicht vorhanden ist. Wenn Sie sich jedoch dafür entscheiden, nur eine Funktion zu übertragen, funktioniert sie nur, wenn ein Element vorhanden ist. Die Kette stirbt also, wenn das ausgewählte Element nicht vorhanden ist. Falls vorhanden, funktioniert die erste Funktion natürlich und die Kette wird fortgesetzt.

Beachten Sie, dass die Verwendung der Rückruffunktion dazu beiträgt, die Kette beizubehalten - das Element wird zurückgegeben, und Sie können die Kettenbefehle wie jede andere jQuery-Methode fortsetzen!

Verwendungsbeispiel

 if ($.exist('#eleID')) {  } // param as STRING if ($.exist($('#eleID'))) {  } // param as jQuery OBJECT if ($('#eleID').exist()) {  } // enduced on jQuery OBJECT $.exist('#eleID', function() { // param is STRING  CALLBACK METHOD   }, function() { // param is STRING  CALLBACK METHOD   }) $('#eleID').exist(function() { // enduced on jQuery OBJECT with CALLBACK METHOD   }) $.exist({ // param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD element: '#eleID', callback: function() {   } }) 
52
09 нояб. die antwort ist gegeben SpYk3HH 09 Nov. 2012-11-09 20:47 12 um 20:47 Uhr 2012-11-09 20:47

Ich sehe, dass die meisten Antworten hier nicht so genau sind, wie sie sein sollten, sie überprüfen die Länge des Elements. In vielen Fällen kann es normal sein , aber nicht 100%. Stellen Sie sich vor, dass eine Zahl anstelle einer Funktion übergeben wird, also erstelle ich einen Funktionsprototyp prüft alle Bedingungen und gibt die Antwort so zurück, wie sie sein sollte:

 $.fn.exists = $.fn.exists || function() { return !!(this.length  (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); } 

Dies prüft die Länge und den Typ. Jetzt können Sie es wie folgt überprüfen:

 $(1980).exists(); //return false $([1,2,3]).exists(); //return false $({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false $([{nodeName: 'foo'}]).exists() // returns false $('div').exists(); //return true $('.header').exists(); //return true $(document).exists(); //return true $('body').exists(); //return true 
48
20 мая '17 в 12:21 2017-05-20 12:21 Die Antwort wird von Alireza am 20. Mai '17 um 12:21 2017-05-05 12:21 gegeben

Keine jQuery benötigt. Mit einfachem JavaScript ist es einfacher und semantisch korrekt zu prüfen:

 if(document.getElementById("myElement")) { //Do something... } 

Wenn Sie aus irgendeinem Grund keinen Elementbezeichner angeben möchten, können Sie trotzdem eine andere JavaScript-Methode verwenden, die für den Zugriff auf das DOM vorgesehen ist.

jQuery ist wirklich cool, aber lassen Sie reines JavaScript nicht vergessen ...

47
14 нояб. Die Antwort wird amypellegrini am 14. November gegeben . 2011-11-14 17:20 '11 am 17:20 2011-11-14 17:20

Sie können dies verwenden:

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){} 
42
01 июня '13 в 10:20 2013-06-01 10:20 Die Antwort wird gegeben Amitābha 1. Juni 13 um 10:20 2013-06-01 10:20

Der Grund für alle vorherigen Antworten ist der .length Parameter, weil sie meistens die Jquery-Option $() , die eine SelectorAll-Anforderung hinter den Vorhängen hat (oder sie direkt verwenden). Diese Methode ist ziemlich >allen Übereinstimmungen mit diesem Selektor suchen und sie mit einem Array füllen muss.

Der Parameter ['length'] ist nicht erforderlich oder nützlich, und der Code wird viel schneller, wenn Sie document.querySelector(selector) statt dessen verwenden, da er das erste entsprechende Element oder, wenn er nicht gefunden wird, zurückgibt.

 function elementIfExists(selector){ //named this way on purpose, see below return document.querySelector(selector); }  var myelement = elementIfExists("#myid") || myfallbackelement; 

Bei dieser Methode bleibt jedoch das eigentliche Rückgabeobjekt erhalten; Das ist in Ordnung, wenn es nicht als Variable gespeichert und wiederverwendet wird (wenn Sie es vergessen, wird der Link gespeichert).

 var myel=elementIfExists("#myid"); // now we are using a reference to the element which will linger after removal myel.getParentNode.removeChild(myel); console.log(elementIfExists("#myid"));  console.log(myel);  myel=null;  

In einigen Fällen kann dies erforderlich sein. Es kann wie folgt in einer for-Schleife verwendet werden:

  for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel)) if (myel == myblacklistedel) break; 

Wenn Sie wirklich kein Element benötigen und nur Wahrheit / Falsch erhalten / speichern möchten, verdoppeln Sie einfach nicht! Er arbeitet an ungebundenen Schuhen, warum ist er hier?

 function elementExists(selector){ return !!document.querySelector(selector); }  var hastables = elementExists("table");  if (hastables){  } setTimeOut(function (){if (hastables  !elementExists("#mytablecss")) alert("bad table layouts");},3000); 
37
12 авг. Antwort vom Technosaurus 12. August 2014-08-12 02:42 '14 um 2:42 2014-08-12 02:42

Ich habe festgestellt, dass if ($(selector).length) {} nicht ausreicht. Die Anwendung wird deaktiviert, wenn der selector ein leeres {} -Objekt ist.

 var $target = $({}); console.log($target, $target.length); // Console output: // ------------------------------------- // [▼ Object ] 1 // ► __proto__: Object 

Mein einziger Vorschlag ist, eine zusätzliche Prüfung für {} durchzuführen.

 if ($.isEmptyObject(selector) || !$(selector).length) { throw new Error('Unable to work with the given selector.'); } 

Ich bin immer noch auf der Suche nach einer besseren Lösung, obwohl es etwas hart ist.

Editieren: WARNUNG! Dies funktioniert nicht im IE, wenn der selector eine Zeichenfolge ist.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 
32
06 февр. Die Antwort wird gegeben Oleg 06 Feb. 2012-02-06 23:37 '12 um 23:37 Uhr 2012-02-06 23:37

Sie können überprüfen, ob das Element vorhanden ist oder nicht die Länge im Java-Skript verwendet. Wenn die Länge größer als Null ist, ist das Element vorhanden. Wenn die Länge Null ist, ist kein Element vorhanden

 // These by Id if( $('#elementid').length > 0){ // Element is Present }else{ // Element is not Present } // These by Class if( $('.elementClass').length > 0){ // Element is Present }else{ // Element is not Present } 
30
09 июля '15 в 15:39 2015-07-09 15:39 Die Antwort wird von Anurag Deokar am 9. Juli 15 am 15:39 2015-07-09 15:39 gegeben

Ist $.contains() was Sie wollen?

jQuery.contains( container, contained )

Die $.contains() -Methode gibt true zurück, wenn das DOM-Element, das vom zweiten Argument bereitgestellt wird, ein Nachkomme des DOM-Elements ist, das vom ersten Argument bereitgestellt wird, unabhängig davon, ob es sich um einen direkten Nachkommen handelt oder tiefer verschachtelt ist. Andernfalls wird false zurückgegeben. Es werden nur Elementknoten unterstützt. Wenn das zweite Argument ein Text- oder Kommentarknoten ist, gibt $.contains() false zurück.

Hinweis Das erste Argument muss ein DOM-Element sein, kein jQuery-Objekt oder ein reguläres JavaScript-Objekt.

30
23 окт. Hiway wurde am 23. Oktober veröffentlicht 2013-10-23 08:46 13 um 08:46 2013-10-23 08:46

Die Verfügbarkeit der Artikel wird auf der offiziellen jQuery-Website erfasst.

Verwenden Sie die length- Eigenschaft der von Ihrem Selektor zurückgegebenen jQuery-Auflistung:

 if ($("#myDiv").length) { $("#myDiv").show(); } 

Beachten Sie, dass nicht immer geprüft werden muss, ob ein Element vorhanden ist. Der folgende Code zeigt das Element an, wenn es existiert, und führt nichts aus (ohne Fehler), falls dies nicht der Fall ist:

 $("#myDiv").show(); 
26
22 марта '17 в 17:32 2017-03-22 17:32 Die Antwort wird von Tilak Maddy am 22. März 17 um 17:32 2017-03-22 17:32 gegeben

Dies ist allen Antworten sehr ähnlich, aber warum nicht den Operator verwenden ! zweimal, damit Sie einen booleschen Wert erhalten können:

 jQuery.fn.exists = function(){return !!this.length}; if ($(selector).exists()) { // the element exists, now what?... } 
25
04 мая '15 в 6:31 2015-05-04 06:31 Die Antwort wird von Santiago Hernández am 4. Mai 15 um 06:31 Uhr 2015-05-04 06:31 gegeben
 $(selector).length  //Do something 
25
28 мая '12 в 15:58 2012-05-28 15:58 Die Antwort gibt SJG am 28. Mai '12 um 15:58 2012-05-28 15:58

Testen Sie die DOM Elementprüfung.

 if (!!$(selector)[0]) // do stuff 
23
09 авг. die antwort wird von guest271314 09 aug gegeben. 2015-08-09 05:55 '15 am 5:55 2015-08-09 05:55

Inspiriert von der Hiway-Antwort kam mir folgendes:

 $.fn.exists = function() { return $.contains( document.documentElement, this[0] ); } 

jQuery.contains nimmt zwei DOM-Elemente und prüft, ob das erste Element eines enthält.

Verwenden Sie document.documentElement , da das erste Argument die Semantik der exists Methode ausführt, wenn wir es ausschließlich anwenden möchten, um zu prüfen, ob ein Element im aktuellen Dokument vorhanden ist.

Im Folgenden habe ich ein Snippet zusammengestellt, das jQuery.exists() mit den jQuery.exists() $(sel)[0] und $(sel).length , die truthy Werte für $(4) und $(4).exists() zurückgibt . Bei der Überprüfung der Existenz eines Elements im DOM scheint dies das gewünschte Ergebnis zu sein .

 td { border: 1px solid black } 
22
13 окт. Die Antwort ist Oliver 13. Oktober gegeben. 2015-10-13 23:01 '15 um 23:01 Uhr 2015-10-13 23:01

Ich mag es einfach nur Vanilla-Javascript zu verwenden.

 function isExists(selector){ return document.querySelectorAll(selector).length>0; } 
20
19 июня '16 в 1:37 2016-06-19 01:37 Die Antwort wird gegeben Sanu Uthaiah Bollera 19. Juni '16 um 01:37 2016-06-19 01:37

Ich bin auf diese Frage gestoßen und möchte einen Code-Ausschnitt teilen, den ich gerade verwende:

 $.fn.exists = function(callback) { var self = this; var wrapper = (function(){ function notExists () {} notExists.prototype.otherwise = function(fallback){ if (!self.length) { fallback.call(); } }; return new notExists; })(); if(self.length) { callback.call(); } return wrapper; } 

Und jetzt kann ich solchen Code schreiben -

 $("#elem").exists(function(){ alert ("it exists"); }).otherwise(function(){ alert ("it doesn't exist"); }); 

Das mag wie viel Code aussehen, aber wenn Sie in CoffeeScript schreiben, ist dies einiges:

 $.fn.exists = (callback) -> exists = @length callback.call() if exists new class otherwise: (fallback) -> fallback.call() if not exists 
18
28 июля '14 в 13:50 2014-07-28 13:50 Die Antwort ist Eternal1 28. Juli 14 um 13:50 2014-07-28 13:50 gegeben

Keine jQuery benötigt

 if(document.querySelector('.a-class')) { // do something } 
18
28 нояб. Die Antwort wird von Pawel am 28. November gegeben. 2016-11-28 13:43 '16 um 13:43 Uhr 2016-11-28 13:43

Ich hatte einen Fall, in dem ich sehen wollte, ob ein Objekt in einem anderen Objekt vorhanden ist. Deshalb habe ich der ersten Antwort etwas hinzugefügt, um den Selektor im Selektor zu überprüfen.

 // Checks if an object exists. // Usage: // // $(selector).exists() // // Or: // // $(selector).exists(anotherSelector); jQuery.fn.exists = function(selector) { return selector ? this.find(selector).length : this.length; }; 
17
06 апр. Antwort von jcreamer898 April 06 2012-04-06 00:02 '12 um 0:02 2012-04-06 00:02

Wie wäre es:

 function exists(selector) { return $(selector).length; } if (exists(selector)) { // do something } 

Dies ist sehr minimal und spart Zeit, wenn Sie jedes Mal den Auswahlschalter $() eingeben müssen.

16
05 марта '14 в 0:15 2014-03-05 00:15 Die Antwort ist GSTAR 05. März '14 um 0:15 2014-03-05 00:15

Ich benutze das:

  $.fn.ifExists = function(fn) { if (this.length) { $(fn(this)); } }; $("#element").ifExists( function($this){ $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')}); } ); 

Führen Sie die Kette nur aus, wenn ein jQuery-Element vorhanden ist - http://jsfiddle.net/andres_314/vbNM3/2/

12
02 авг. die antwort ist gegeben undy_314 02 aug. 2012-08-02 00:56 '12 at 0:56 2012-08-02 00:56

Hier ist meine Lieblingsmethode in jQuery vorhanden

 $.fn.exist = function(callback) { return $(this).each(function () { var target = $(this); if (this.length > 0  typeof callback === 'function') { callback.call(target); } }); }; 

und eine andere Version, die Rückruf unterstützt, wenn der Selektor nicht vorhanden ist

 $.fn.exist = function(onExist, onNotExist) { return $(this).each(function() { var target = $(this); if (this.length > 0) { if (typeof onExist === 'function') { onExist.call(target); } } else { if (typeof onNotExist === 'function') { onNotExist.call(target); } } }); }; 

Beispiel:

 $('#foo .bar').exist( function () { // Stuff when '#foo .bar' exists }, function () { // Stuff when '#foo .bar' does not exist } ); 
11
08 марта '16 в 20:06 2016-03-08 20:06 Die Antwort wurde von Ducdhm am 08. März 2016 um 20:06 Uhr 2016-03-08 20:06 gegeben

$("selector" ) gibt ein Objekt mit der Eigenschaft length . Wenn der Selektor Elemente findet, werden diese in das Objekt aufgenommen. Wenn Sie also die Länge überprüfen, werden Sie feststellen, ob Elemente vorhanden sind. In Javascript 0 == false . Wenn Sie also keine 0 , funktioniert Ihr Code.

 if($("selector").length){ //code in the case } 
11
25 марта '16 в 14:05 2016-03-25 14:05 Die Antwort gibt Kamuran Sönecek am 25. März 16 um 14:05 Uhr 2016-03-25 14:05

Sie müssen nicht prüfen, ob diese 0 als $(selector).length > 0 , $(selector).length und eine elegante Methode zum Überprüfen der Existenz von Elementen ist. Ich glaube nicht, dass es sich lohnt, eine Funktion zu schreiben, wenn Sie mehr Dinge tun wollen, ja.

 if($(selector).length){ // true if length is not 0 } else { // false if length is 0 } 
9
20 июня '17 в 12:43 2017-06-20 12:43 Die Antwort wird von Andrei Todorut am 20. Juni 17 um 12:43 2017-06-20 12:43 gegeben
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() zählt die Anzahl der vom Selektor zurückgegebenen Elemente.

8
25 февр. Die Antwort wird gegeben Mad_Hat 25 Feb. 2009-02-25 05:44 09 um 05.44 Uhr 2009-02-25 05:44 Uhr
  • 1
  • 2

Weitere Fragen zu Tags oder Frage stellen