web-dev-qa-db-fra.com

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

J'ai une fonction qui ajoute un <div> à un élément au 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 en tant que <div>id de l'élément ajouté.

J’ai besoin de voir si un <div>id avec name 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 le message d'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 ensuite supprimer le 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 .labels, il existait donc un moyen de fermer le <div> ajouté si nécessaire. Après avoir cliqué sur .mini-close et tenté 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 instruction if.

javascriptjquery
243
sadmicrowave

Vous pouvez utiliser .length après le sélecteur pour voir s'il correspond à un élément, 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 de cette partie (puisqu'il s'agit d'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');
  }
});
_
506
Nick Craver

La réponse de Nick résume tout. Vous pouvez également utiliser la valeur de retour de getElementById directement comme condition, plutôt que de la comparer à null (dans tous les cas, cela fonctionne, mais je trouve personnellement ce style un peu plus lisible):

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

Essayez de vérifier la longueur du sélecteur, s'il vous renvoie quelque chose, alors 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 deuxième pour class.

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

if(!$("#id").length) /*doesn't exist*/
18
Kareem
if ( $( "#myDiv" ).length ) {
    //id id ( "#myDiv" ) is exist this will perform
    $( "#myDiv" ).show();

}

Une autre manière de raccourci:

    $( "#myDiv" ).length && $( "#myDiv" ).show();
8
Sanjib Debnath

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

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

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.
4
rckd

Voici la fonction jQuery que j'utilise:

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

Cela retournera une valeur booléenne. Si element existe, il retourne vrai. Si vous voulez sélectionner un élément par nom de classe, remplacez simplement # par .

2
Sahan

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

Objectif est de vérifier si le div existe puis exécutez le code. Facile.

Condition:

$('#myDiv').length

Note:

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

Cela retournera un nombre chaque fois qu'il sera exécuté. Ainsi, s'il n'y a pas de div, cela donnera un zéro [0], et comme nous, aucun 0 ne peut être représenté comme faux en binaire afin que vous puissiez l'utiliser dans une instruction if. Et vous pouvez vous en servir comme comparaison avec un nombre nul. alors que tout il y a trois déclaration donnée 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>");
    }
2
Ad Kahn

mettez l'identifiant 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
}
1
bhavya_w