Comment vérifier les objets nuls dans jQuery


169

J'utilise jQuery et je souhaite vérifier l'existence d'un élément dans ma page. J'ai écrit le code suivant, mais cela ne fonctionne pas:

if($("#btext" + i) != null) {
    //alert($("#btext" + i).text());
    $("#btext" + i).text("Branch " + i);
}

Comment vérifier l'existence de l'élément?

Réponses:


251

Consultez la FAQ jQuery ...

Vous pouvez utiliser la propriété length de la collection jQuery renvoyée par votre sélecteur:

if ( $('#myDiv').length ){}

que pensez-vous de var _myDiv = $ ('# myDiv'); ... .... if (_myDiv.lenght) {...} produit une exception.
Nuri YILMAZ

1
comme dit eleotlecram; mieux éviter .length
numediaweb

5
@AurelianoBuendia, vous avez utilisé à la lenghtplace de length; c'est une faute d'orthographe.
Sam

4
@numediaweb, eleotlecram n'a pas dit d'éviter .length.
Sam

1
mais .. n'obtiendriez-vous pas une erreur "Impossible de lire la propriété 'longueur' de null"?
Sagive SEO

61

(Puisque je ne semble pas avoir assez de réputation pour voter contre la réponse ...)

Wolf a écrit:

L'appel de la propriété length sur un objet non défini ou nul entraînera l'échec des navigateurs IE et webkit!

Essayez plutôt ceci:

 // NOTE!! THE FOLLOWING IS WRONG; DO NOT USE!  -- EleotleCram
if($("#something") !== null){
  // do something
}

ou

 // NOTE!! THE FOLLOWING IS WRONG; DO NOT USE!  -- EleotleCram
if($("#something") === null){
  // don't do something
}

S'il est vrai que l'appel de la propriété length sur un objet non défini ou nul entraînera l'échec des navigateurs, le résultat des sélecteurs de jQuery (le $ ('...')) ne sera jamais nul ou indéfini. Ainsi, les suggestions de code n'ont aucun sens. Utilisez l'une des autres réponses, elles ont plus de sens.


(Mise à jour 2012) Parce que les gens regardent le code et que cette réponse est assez élevée dans la liste: depuis quelques années, j'utilise ce petit plugin:

  jQuery.fn['any'] = function() {
     return (this.length > 0);
  };

Je pense que $ ('div'). Any () lit mieux que $ ('div'). Length , plus vous ne souffrirez pas autant des fautes de frappe: $ ('div'). Ayn () donnera une erreur d'exécution , $ ('div'). longueur sera très probablement toujours faux.

__
Modifications en novembre 2012:

1) Parce que les gens ont tendance à regarder le code et à ne pas lire ce qui est dit autour du code, j'ai ajouté deux grandes mises en garde pour le lecteur au code cité de Wolf.
2) J'ai ajouté le code du petit plugin que j'utilise pour cette situation.


2
@VovaPopov: Je suggère que la prochaine fois, vous preniez un peu plus de temps pour lire la réponse. Je disais simplement que l'exemple de code "par Wolf" était incorrect. Je n'ai jamais fourni de réponse, je me suis simplement référé à certaines des autres réponses qui ont plus de sens.
eleotlecram

Bonne réponse. Je suis désolé que les gens l'interprètent mal.
Joe Simmons

14

La fonction de recherche renvoie un tableau d'éléments correspondants. Vous pouvez vérifier si la longueur est égale à zéro. Notez le changement pour ne rechercher les éléments qu'une seule fois et réutiliser les résultats si nécessaire.

var elem = $("#btext" + i);
if (elem.length != 0) {
   elem.text("Branch " + i);
}

De plus, avez-vous simplement essayé d'utiliser la fonction de texte - si aucun élément n'existe, cela ne fera rien.

$("#btext" + i).text("Branch " + i);

7
0 est une valeur fausse, donc l'expression elem.length est évaluée à false - en d'autres termes, il n'y a pas besoin de la partie '! = 0'
James

2
@ 999, je pense que la vérification par rapport à zéro rend le code plus lisible, bien que les deux manières soient probablement lisibles pour quelqu'un qui est habitué aux langages de script.
Sam

12

La fonction jquery $ () renvoie toujours une valeur non nulle - signifie que les éléments correspondent à votre sélecteur cretaria. Si l'élément n'a pas été trouvé, il renverra un tableau vide. Donc, votre code ressemblera à quelque chose comme ceci -

if ($("#btext" + i).length){
        //alert($("#btext" + i).text());
    $("#btext" + i).text("Branch " + i);
}

1
Je ne pense pas que ce soit vrai que $ () renvoie un tableau. Les objets jQuery ont des comportements similaires à ceux des tableaux, mais je ne pense pas qu'ils soient en fait des tableaux, et je pense que vous constaterez que tout leur comportement n'est pas le même que celui des tableaux. Voir cette rapide démonstration .
Sam

5

Dans jQuery 1.4, vous obtenez la fonction $ .isEmptyObject, mais si vous êtes obligé d'utiliser une ancienne version de jQ comme nous, les pauvres développeurs Drupal volent simplement, utilisez ce code:

// This is a function similar to the jQuery 1.4 $.isEmptyObject.
function isObjectEmpty(obj) {
  for ( var name in obj ) {
    return false;
  }
  return true;
}

Utilisez-le comme:

console.log(isObjectEmpty(the_object)); // Returns true or false.

Cela ne répond pas à la question.
Sam

5

peu importe ce que vous sélectionnez, la fonction $()renvoie toujours un objet jQuery afin qu'il ne puisse pas être utilisé pour tester. Le meilleur moyen encore (sinon le seul) est d'utiliser la size()fonction ou la propriété native length comme expliqué ci-dessus.

if ( $('selector').size() ) {...}                   

3
if ( $('#whatever')[0] ) {...}

L'objet jQuery qui est retourné par toutes les méthodes jQuery natives n'est PAS un tableau, c'est un objet avec de nombreuses propriétés; l'un d'eux étant une propriété "longueur". Vous pouvez également vérifier la taille () ou get (0) ou get () - 'get (0)' fonctionne de la même manière que l'accès au premier élément, c'est-à-dire $ (elem) [0]


3

Qu'en est-il de l'utilisation de "non défini"?

if (value != undefined){ // do stuff } 

1

utilisez $("#selector").get(0)pour vérifier avec null comme ça. get renvoie l'élément dom, jusqu'à ce que vous ayez affaire à un tableau, où vous devez vérifier la propriété length. Personnellement, je n'aime pas la vérification de la longueur pour la gestion des nuls, cela me déroute pour une raison quelconque :)


C'est intéressant la façon dont différentes personnes pensent différemment; Je pense qu'il est plus judicieux de vérifier si le nombre d'éléments est nul plutôt que de vérifier si le premier élément est présent.
Sam

1

En utilisant la propriété length, vous pouvez le faire.

jQuery.fn.exists = function(){return ($(this).length < 0);}
if ($(selector).exists()) { 
   //do somthing
}

2
Voulez-vous dire (this) .length> 0?
sage88

0

lorsque l'objet est vide, renvoie cette erreur:

Uncaught TypeError: Cannot read property '0' of null

J'essaye ce code:

try{
  if ($("#btext" + i).length) {};               
}catch(err){
  if ($("#btext" + i).length) {
     //working this code if the item, not NULL 
   }
}

-4
if (typeof($("#btext" + i)) == 'object'){
    $("#btext" + i).text("Branch " + i);
}

-7

L'appel de la propriété length sur un objet non défini ou nul entraînera l'échec des navigateurs IE et webkit!

Essayez plutôt ceci:

if($("#something") !== null){
  // do something
}

ou

if($("#something") === null){
  // don't do something
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.