Wie finde ich heraus, ob div mit spezifischer ID in jQuery existiert?

Question

Ich habe eine Funktion, die an ein Element bei Klick eine <div> anfügt. Die Funktion ruft den Text des angeklickten Elements ab und ordnet es einer Variablen namens name zu. Diese Variable wird dann als <div>id des angehängten Elements verwendet.

Ich muss sehen, ob ein <div>id mit name bereits existiert, bevor ich das Element anfügen, aber ich weiß nicht, wie man das findet.

Hier ist mein Code:

$("li.friend").live('click', function() { 
    name = $(this).text(); 

    // if-statement checking for existence of <div> should go here 
    // If <div> does not exist, then append element 
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>"); 

    // Else 
    alert('this record already exists'); 
}); 

Dies scheint ziemlich einfach, aber ich bin immer die Fehlermeldung „Unerwartetes Ende der Datei, während für Klassennamen suchen“. Ich habe keine Ahnung, was das bedeutet.

if (document.getElementById(name)) { 
    $("div#" + name).css({bottom: '30px'}); 
} else { 
    $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
} 

Was mehr ist, dass ich dieses Element in der Lage sein wollen, zu löschen, wenn ich es in der Nähe aus, die dann die div id [name] aus dem Dokument entfernen sollte aber .remove() dies nicht tun. Hier

ist der Code für die:

$(".mini-close").live('click', function(){ 
    $(this).parent().remove(); 
}); 

Ich habe .mini-close zum Anfügen Funktion als Kind .labels so es ein Weg der beigefügten <div> zu schließen, wenn nötig. Nach dem Klicken auf .mini-close und versuchen, den gleichen Namen erneut von li.friends zu klicken, findet es immer noch die div id [name] und gibt den ersten Teil meiner if Anweisung zurück.

Answer 1

Sie .length nach dem Selektor verwenden können, um festzustellen, ob es irgendwelche Elemente abgestimmt, wie folgt aus:

if($("#" + name).length == 0) { 
    //it doesn't exist 
} 

Die Vollversion:

$("li.friend").live('click', function(){ 
    name = $(this).text(); 
    if($("#" + name).length == 0) { 
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>"); 
    } else { 
    alert('this record already exists'); 
    } 
}); 

Oder die nicht-jQuery-Version für diesen Teil (da es eine ID ist):

$("li.friend").live('click', function(){ 
    name = $(this).text(); 
    if(document.getElementById(name) == null) { 
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>"); 
    } else { 
    alert('this record already exists'); 
    } 
}); 

Answer 2

Nick's Antwort nagelt es. Sie könnten auch den Rückgabewert von getElementById direkt als Bedingung verwenden, anstatt einen Vergleich mit null (oder so funktioniert, aber ich persönlich diesen Stil ein wenig mehr lesbar finden):

if (document.getElementById(name)) { 
    alert('this record already exists'); 
} else { 
    // do stuff 
} 

Answer 3

Versuchen Sie, die Länge zu überprüfen der Selektor, wenn er dir etwas zurückgibt, dann muss das Element sonst nicht existieren.

if($('#selector').length)   // use this if you are using id to check 
{ 
    // it exists 
} 


if($('.selector').length)   // use this if you are using class to check 
{ 
    // it exists 
} 

Verwenden Sie die erste if-Bedingung für die ID und die zweite für die Klasse.

Answer 4

Sie können überprüfen jquery einfach so mit:

if($('#divId').length!==0){ 
     Your Code Here 
} 

Answer 5

if($("#id").length) /*exists*/ 

if(!$("#id").length) /*doesn't exist*/ 

Answer 6

die ID setzen Sie in Jquery überprüfen wollen, ist Methode.

var idcheck = $("selector").is("#id"); 

if(idcheck){ // if the selector contains particular id 

// your code if particular Id is there 

} 
else{ 
// your code if particular Id is NOT there 
} 

Answer 7

if ($("#myDiv").length) { 
    //id id ("#myDiv") is exist this will perform 
    $("#myDiv").show(); 

} 

Eine weitere Kurzform:

$("#myDiv").length && $("#myDiv").show(); 

Answer 8

Sie es auf unterschiedliche Weise verarbeiten kann,

Ziel ist, wenn das div dann den Code ausführen existieren zu überprüfen. Einfach.

Zustand:

$('#myDiv').length 

Hinweis:

#myDiv -> < div id='myDiv' > <br> 
.myDiv -> < div class='myDiv' > 

Diese eine Reihe zurückkehren wird es jedes Mal ausgeführt wird, so dass, wenn es keine div ist, wird es eine Null geben [0] und da wir keine 0 als binär darstellen können, können Sie sie in der if-Anweisung verwenden. Und Sie können es als einen Vergleich mit einer None-Nummer verwenden. während jede Aussage gibt es drei unten angegebenen

// Statement 0 
// jQuery/Ajax has replace [ document.getElementById with $ sign ] and etc 
// if you don't want to use jQuery/ajax 

    if (document.getElementById(name)) { 
     $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    } 

// Statement 1 
    if ($('#'+ name).length){ // if 0 then false ; if not 0 then true 
     $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    } 

// Statement 2 
    if(!$('#'+ name).length){ // ! Means Not. So if it 0 not then [0 not is 1] 
      $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    } 
// Statement 3 
    if ($('#'+ name).length > 0) { 
     $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    } 

// Statement 4 
    if ($('#'+ name).length !== 0) { // length not equal to 0 which mean exist. 
     $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    } 

Answer 9

Der einfachste Weg ist ..

if(window["myId"]){ 
    // .. 
} 

Dies auch Teil von HTML5-Spezifikationen ist: https://www.w3.org/TR/html5/single-page.html#accessing-other-browsing-contexts#named-access-on-the-window-object

window[name] 
    Returns the indicated element or collection of elements. 

Answer 10

Hier ist die jQuery-Funktion Ich benutze

function isExists(var elemId){ return jQuery('#'+elemId).length > 0; }

Dies liefert einen booleschen Wert. Wenn das Element existiert, wird True zurückgegeben. Wenn Sie mit dem Klassennamen auswählen Element möchten, ersetzen Sie einfach #-.