Cómo verificar objetos nulos en jQuery


169

Estoy usando jQuery y quiero verificar la existencia de un elemento en mi página. He escrito el siguiente código, pero no funciona:

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

¿Cómo verifico la existencia del elemento?

Respuestas:


251

Consulte las preguntas frecuentes de jQuery ...

Puede usar la propiedad de longitud de la colección jQuery que devuelve su selector:

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

¿Qué opinas sobre var _myDiv = $ ('# myDiv'); ... .... if (_myDiv.lenght) {...} produce una excepción.
Nuri YILMAZ

1
como dijo eleotlecram; mejor evitar .length
numediaweb

55
@AurelianoBuendia, has utilizado en lenghtlugar de length; Es un error de ortografía.
Sam

44
@numediaweb, eleotlecram no dijo que evitar .length.
Sam

1
pero ... ¿no obtendrías el error "No se puede leer la propiedad 'longitud' de nulo"?
Sagive SEO

61

(Como parece que no tengo suficiente reputación como para rechazar la respuesta ...)

Wolf escribió:

Llamar a la propiedad de longitud en un objeto indefinido o nulo hará que los navegadores IE y webkit fallen.

En su lugar, intente esto:

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

o

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

Si bien es cierto que llamar a la propiedad de longitud en un objeto indefinido o nulo hará que los navegadores fallen, el resultado de los selectores de jQuery ($ ('...')) nunca será nulo o indefinido. Por lo tanto, las sugerencias de código no tienen sentido. Usa una de las otras respuestas, tienen más sentido.


(Actualización 2012) Debido a que la gente mira el código y esta respuesta está bastante arriba en la lista: durante los últimos años, he estado usando este pequeño complemento:

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

Creo que $ ('div'). Any () se lee mejor que $ ('div'). Length , además de que no sufrirá tanto de errores tipográficos: $ ('div'). Ayn () dará un error de tiempo de ejecución , $ ('div'). la longitud en silencio probablemente sea siempre falsa.

__
Ediciones noviembre 2012:

1) Debido a que las personas tienden a mirar el código y no leer lo que se dice alrededor del código, agregué dos grandes notas de advertencia de lector al código citado de Wolf.
2) Agregué el código del pequeño complemento que uso para esta situación.


2
@VovaPopov: sugiero la próxima vez que tome un poco más de tiempo para leer la respuesta. Simplemente estaba afirmando que el ejemplo de código "por Wolf" era incorrecto. Nunca proporcioné una respuesta, solo me referí a algunas de las otras respuestas que tienen más sentido.
Eleotlecram 01 de

Buena respuesta. Lamento que la gente lo malinterprete.
Joe Simmons

14

La función de búsqueda devuelve una matriz de elementos coincidentes. Podrías comprobar si la longitud es cero. Tenga en cuenta el cambio para buscar solo los elementos una vez y reutilizar los resultados según sea necesario.

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

Además, ¿ha intentado utilizar la función de texto? Si no existe ningún elemento, no hará nada.

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

77
0 es un valor falso, por lo que la expresión elem.length se evalúa como falsa; en otras palabras, no hay necesidad de la parte '! = 0'
James

2
@ 999, creo que la verificación contra cero hace que el código sea más legible, aunque es probable que ambas formas sean legibles para alguien que esté acostumbrado a los lenguajes de secuencias de comandos.
Sam

12

La función jquery $ () siempre devuelve un valor no nulo: los elementos medios coinciden con su cretaria de selector. Si no se encuentra el elemento, devolverá una matriz vacía. Entonces su código se verá así:

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

1
No creo que sea cierto que $ () devuelva una matriz. Los objetos jQuery tienen comportamientos similares a los arreglos, pero no creo que en realidad sean arreglos, y creo que descubrirán que no todos sus comportamientos son iguales a los de los arreglos. Vea esta rápida demostración .
Sam

5

En jQuery 1.4 obtienes la función $ .isEmptyObject, pero si te ves obligado a usar una versión anterior de jQ como nosotros, los desarrolladores pobres de Drupal simplemente roban usa este código:

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

Úselo como:

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

Esto no aborda la pregunta.
Sam

5

No importa cuál sea su selección, la función $()siempre devuelve un objeto jQuery para que no pueda usarse para probar. La mejor manera hasta ahora (si no la única) es utilizar la size()función o la propiedad de longitud nativa como se explicó anteriormente.

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

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

El objeto jQuery que es devuelto por todos los métodos nativos de jQuery NO es una matriz, es un objeto con muchas propiedades; uno de ellos es una propiedad de "longitud". También puede verificar el tamaño () o obtener (0) o obtener () - 'obtener (0)' funciona igual que acceder al primer elemento, es decir, $ (elem) [0]



1

use $("#selector").get(0)para verificar con nulos como ese. get devuelve el elemento dom, hasta entonces se trata de una matriz, donde necesita verificar la propiedad de longitud. Personalmente no me gusta la verificación de longitud para el manejo nulo, me confunde por alguna razón :)


Es interesante la forma en que diferentes personas piensan de manera diferente; Creo que tiene más sentido verificar si el número de elementos es cero en lugar de verificar si el primer elemento está presente.
Sam

1

Usando la propiedad de longitud puedes hacer esto.

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

2
¿Quieres decir (esto) .length> 0?
sage88

0

cuando el objeto está vacío devuelve este error:

Uncaught TypeError: Cannot read property '0' of null

Intento este código:

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

¡Llamar a la propiedad de longitud en un objeto indefinido o nulo hará que los navegadores IE y webkit fallen!

En su lugar, intente esto:

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

o

if($("#something") === null){
  // don't do something
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.