Come scoprire se in jQuery esiste un div con ID specifico?

Ho una funzione che aggiunge <div>un elemento a un clic. La funzione ottiene il testo dell'elemento cliccato e lo assegna a una variabile chiamata name. Tale variabile viene quindi utilizzata come <div> idelemento aggiunto.

Devo vedere se esiste già un <div> idcon nameprima di aggiungere l'elemento ma non so come trovarlo.

Ecco il mio codice:

$("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');
});

Sembra abbastanza semplice ma sto ricevendo l'errore " Fine del file imprevista durante la ricerca del nome della classe" . Non ho idea di cosa significhi.

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>");
}

Inoltre, desidero poter eliminare questo elemento se lo chiudo, il che dovrebbe quindi rimuoverlo div id [name]dal documento ma .remove()non farlo.

Ecco il codice per questo:

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

Ho aggiunto .mini-closealla funzione append come figlio di .labelsquindi c'era un modo per chiudere l'aggiunta <div>se necessario. Dopo aver fatto clic .mini-closee tentato di fare di nuovo clic sullo stesso nome da li.friendsesso, trova ancora div id [name]e restituisce la prima parte della mia ifdichiarazione.

Puoi usare .lengthdopo il selettore per vedere se ha trovato degli elementi, come questo:

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

La versione completa:

$("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');
  }
});

Oppure, la versione non jQuery per questa parte (poiché è un ID):

$("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');
  }
});

La risposta di Nick lo inchioda. Puoi anche utilizzare il valore restituito da getElementById direttamente come condizione, anziché confrontarlo con null (in entrambi i casi funziona, ma trovo personalmente questo stile un po 'più leggibile):

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

Prova a controllare la lunghezza del selettore, se ti restituisce qualcosa, l'elemento deve esistere altrimenti.

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
}

Usa la prima condizione if per id e la seconda per classe.

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

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

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

}

Un altro modo abbreviato:

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

Puoi controllare usando jquery semplicemente in questo modo:

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

Il modo più semplice è ..

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

Anche questo fa parte delle specifiche HTML5: 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.

Ecco la funzione jQuery che uso:

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

Ciò restituirà un valore booleano. Se l'elemento esiste, restituisce true. Se si desidera selezionare l'elemento in base al nome della classe, è sufficiente sostituirlo #con.

Puoi gestirlo in diversi modi,

L'obiettivo è verificare l'esistenza del div, quindi eseguire il codice. Semplice.

Condizione:

$('#myDiv').length

Nota:

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

Questo restituirà un numero ogni volta che viene eseguito, quindi se non ci sono div darà uno Zero [0], e dato che nessuno 0 può essere rappresentato come falso in binario in modo da poterlo usare in if. E puoi usarlo come confronto con un numero nessuno. mentre qualsiasi ci sono tre dichiarazioni fornite di seguito

// 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>");
    }

metti l'id che vuoi controllare in jquery is method.

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
}