Comment trouver si la div avec un id spécifique existe dans jQuery ?

Question

J'ai une fonction qui ajoute un fichier <div> à un élément lors d'un clic. La fonction récupère le texte de l'élément cliqué et l'assigne à une variable appelée name . Cette variable est ensuite utilisée comme <div> id de l'élément ajouté.

J'ai besoin de voir si un <div> id con name existe déjà avant que j'ajoute 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 la 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 alors supprimer l'élément 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 append comme enfant de .labels il y avait donc un moyen de fermer la fenêtre de l'annexe. <div> si nécessaire. Après avoir cliqué sur .mini-close et en essayant de cliquer à nouveau sur le même nom à partir de li.friends il trouve toujours le div id [name] et renvoie la première partie de mon if déclaration.

Answer 1

Vous pouvez utiliser .length aprè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');
  }
});

Answer 2

La réponse de Nick est claire. Vous pouvez également utiliser la valeur de retour de getElementById directement comme condition, plutôt que de la comparer à null (les deux méthodes fonctionnent, mais je trouve personnellement ce style un peu plus lisible) :

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

Answer 3

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

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 l'id et la seconde pour la classe.

Answer 4

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

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

Answer 5

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

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