Comment savoir si div avec un identifiant spécifique existe dans jQuery?

J'ai une fonction qui ajoute un <div>à un élément au clic. La fonction obtient le texte de l'élément cliqué et l'assigne à une variable appelée name. Cette variable est ensuite utilisée comme<div> id élément de l'élément ajouté.

Je dois voir si <div> idavecname existe déjà avant d'ajouter l'élément mais je ne sais pas comment le trouver.

Voici mon 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');
});

Cela semble assez simple, mais j'obtiens l'erreur « Fin de fichier inattendue lors de la recherche du nom de classe» . Je n'ai aucune idée de ce que cela signifie.

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

De plus, je veux pouvoir supprimer cet élément si je le ferme, ce qui devrait ensuite le supprimer div id [name]du document, mais.remove() ne le fait pas.

Voici le code pour cela:

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

J'ai ajouté .mini-closeà la fonction d'ajout en tant qu'enfant de .labelsdonc il y avait un moyen de fermer l'ajout <div>si nécessaire. Après avoir cliqué .mini-closeet tenté de cliquer à nouveau sur le même nom, li.friendsil trouve toujours le div id [name]et renvoie la première partie de ma ifdéclaration.

Vous pouvez utiliser .lengthaprès le sélecteur pour voir s'il correspond à des éléments, comme ceci:

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

La version complète:

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

Ou, la version non jQuery pour cette partie (puisque c'est 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 réponse de Nick le cloue. Vous pouvez également utiliser la valeur de retour de getElementById directement comme condition, plutôt que de la comparer à null (dans les deux cas, cela fonctionne, mais personnellement, je trouve ce style un peu plus lisible):

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

Essayez de vérifier la longueur du sélecteur, s'il vous renvoie quelque chose, l'élément doit exister sinon.

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
}

Utilisez la première condition if pour id et la seconde pour class.

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

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

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

}

Un autre raccourci:

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

Vous pouvez vérifier en utilisant jquery simplement comme ceci:

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

Le moyen le plus simple est ..

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

Cela fait également partie des spécifications 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.

Voici la fonction jQuery que j'utilise:

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

Cela renverra une valeur booléenne. Si l'élément existe, il renvoie vrai. Si vous souhaitez sélectionner l'élément par nom de classe, remplacez simplement #par.

Vous pouvez le gérer de différentes manières,

L'objectif est de vérifier si le div existe puis d'exécuter le code. Facile.

État:

$('#myDiv').length

Remarque:

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

Cela renverra un nombre chaque fois qu'il est exécuté, donc s'il n'y a pas de div, il donnera un zéro [0], et comme nous, aucun 0 peut être représenté comme faux en binaire, vous pouvez donc l'utiliser dans l'instruction if. Et vous pouvez l'utiliser comme comparaison avec un nombre nul. tandis que tout il y a trois déclarations ci-dessous

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

mettez l'id que vous voulez vérifier dans 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
}