jQuery - Überprüfen Sie, ob das DOM-Element bereits vorhanden ist

77

Ich versuche, einige Formularelemente dynamisch über Ajax mit jQuery hinzuzufügen. Ich möchte sicherstellen, dass ich nicht zweimal dasselbe Element erstelle. Daher möchte ich es nur hinzufügen, wenn es noch nicht zum DOM hinzugefügt wurde.

Alle meine Elemente haben eine eindeutige CSS-ID, zum Beispiel:

$('#data_1')

Ich verwende Folgendes, um zu überprüfen, ob das Element bereits vorhanden ist:

if ($('some_element').length == 0) {
    //Add it to the dom
}

Es funktioniert jedoch nur für Elemente, die bereits beim ersten Laden Teil der Seite waren.

Wie überprüfe ich auch, ob Elemente nach dem Laden der Seite dynamisch erstellt wurden?

Jeder Rat wird geschätzt.

Vielen Dank.

jquery Dan
quelle
2
Ihr Code funktioniert für alle Elemente im DOM, die über JavaScript oder gerendertes HTML geladen werden.
John Strickler
2
Die oben verwendete Methode .lengthsollte mit allem funktionieren, unabhängig davon, ob sie mit der Seite geladen oder dynamisch erstellt wurde.
Richard Neil Ilagan
OK, dann muss ich wohl irgendwo einen Fehler haben.
Dan
Lassen Sie uns
1
können Sie nicht einfach tun, wenn ($ ('some_element'). Länge) {// Code}
Scott Romack

Antworten:

111

Dies sollte für alle Elemente funktionieren, unabhängig davon, wann sie generiert werden.

if($('some_element').length == 0) {
}

Schreiben Sie Ihren Code in die Ajax-Rückruffunktionen und es sollte gut funktionieren.

rahul
quelle
23
Es kann besser sein, wenn Sie den strengen Vergleich "===" anstelle von "==" verwenden. Nur eine bewährte Methode.
Peeyush
19

Bei dieser Frage geht es darum, ob ein Element vorhanden ist und alle Antworten prüfen, ob es nicht vorhanden ist :) Kleiner Unterschied, aber erwähnenswert.

Basierend auf der jQuery-Dokumentation wird empfohlen, die Existenz zu überprüfen

if ($( "#myDiv" ).length) {
    // element exists
}

Wenn Sie lieber nach fehlenden Elementen suchen möchten, können Sie Folgendes verwenden:

if (!$( "#myDiv" ).length) {
    // element doesn't exist
}

oder

if (0 === $( "#myDiv" ).length) {
    // element doesn't exist
}

Beachten Sie bitte, dass ich in der zweiten Option === verwendet habe, die etwas schneller als == ist, und die 0 als Yoda-Bedingung links gesetzt habe .

Kollektor
quelle
14

Nur um zu bestätigen, dass Sie das Element richtig auswählen. Probier diese

if ($('#some_element').length == 0) {
    //Add it to the dom
}
sree
quelle
6

Vermutlich haben Sie vergessen, den Artikel an DOM anzuhängen.

Überprüfen Sie es HIER .

Santosh Linkha
quelle
2

wenn IDverfügbar - Sie können verwendengetElementById() 

var element =  document.getElementById('elementId');
  if (typeof(element) != 'undefined' && element != null)
  { 
     // exists.
  }

ODER Versuchen Sie es mit Jquery - 

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}
Ishan Jain
quelle
1 
(()=> {
    var elem = document.querySelector('.elem');  
    (
        (elem) ? 
        console.log(elem+' was found.') :
        console.log('not found')
    )
})();

Wenn es existiert, spuckt es das angegebene Element als DOM-Objekt aus. Mit JQuery erfahren $('.elem')Sie nur, dass es sich um ein Objekt handelt, wenn es gefunden wurde, aber nicht um welches.

Thielicious
quelle
0

In diesem Fall möchten Sie möglicherweise überprüfen, ob das Element im aktuellen DOM vorhanden ist

Wenn Sie überprüfen möchten, ob ein Element im DOM-Baum vorhanden ist (der an das DOM angehängt ist), können Sie Folgendes verwenden:

var data = $('#data_1'); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}
Markoj
quelle
Ich sehe nicht, wie das in irgendeiner Weise besser ist als die anderen Antworten.
Vard
$ (document) .find (yourElement) .length - prüft, ob das Element im "Speicher" vorhanden ist, es muss nicht an dom jQuery.contains angehängt werden (document.documentElement, data [0]) - prüft, ob das Element IS ist BEFESTIGT AN DOM
Markoj
$('#data_1').lengthgibt 1 zurück, wenn das Element an dom angehängt ist, 0, wenn dies nicht der Fall ist. Wenn es ein anderes Ergebnis gibt, wurde die Auswahl getroffen, bevor sich das DOM ändert. $('#data_1')Wenn Sie also den Selektor zu dem Zeitpunkt aufrufen, an dem Sie überprüfen müssen, ob er in dom vorhanden ist, ist die Verwendung contains()sinnlos.
Vard
0 
if ($('#some_element').length === 0) {
    //If exists then do manipulations
}
Dipti S.
quelle
Erklären Sie Ihre Logik für die Antwort wird helfen
Parishodak
0

Nein, um etwas zu vergleichen, Sie können dies einfach überprüfen, indem Sie ...,.

if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}

Sie können auch die Funktion html () verwenden

if($("#url).html()){alert('exist');}
Inzmam ul Hassan
quelle
-3

Denken Sie auch an die Verwendung

$(document).ready(function() {});

Ich weiß nicht, warum sich hier noch niemand das ausgedacht hat (irgendwie traurig). Wann führen Sie Ihren Code aus ??? Gleich zu Beginn? Dann möchten Sie vielleicht die oben erwähnte ready () -Funktion verwenden, damit Ihr Code ausgeführt wird, nachdem die gesamte Seite (mit all ihren dom-Elementen) geladen wurde und nicht vorher! Dies ist natürlich nutzlos, wenn Sie Code ausführen, der nach dem Laden der Seite dom-Elemente hinzufügt! Dann möchten Sie einfach auf diese Funktionen warten und anschließend Ihren Code ausführen ...

oliiix
quelle