Puede que la tarea más común al trabajar con jQuery sea seleccionar un elemento. Los selectores de jQuery son muy sencillos de utilizar, ¿pero como puedes comprobar que el elemento que intentas seleccionar realmente existe?. En StackOverflow y otros foros he visto muchas veces a usuarios preguntando por este tema y casi siempre llegan con una sentencia if similar a esta (suponiendo que se quiere seleccionar el elemento <div id="undiv">):

if ( $("#undiv") ) {
  // Siempre será validado, incluso si #undiv no existe
}

El código anterior no funciona. ¿Por qué? El selector $('#undiv'), o cualquier otro selector válido de jQuery, devuelve siempre un objeto, tanto si el elemento existe como si no; en caso de que no exista, el objecto devuelto estará vacío. La sentencia if en JavaScript chequea un objecto como true incluso si está vacío, por eso el código anterior no nos sirve para comprobar si el elemento seleccionado existe o no.

Si embargo, si podemos comprobar como condición lógica alguna propiedad del objecto. Por ejemplo la propiedad length (longitud). Si la longitud del objeto recibido del selector jQuery es mayor a cero, significa que el objecto no está vacío y que, por tanto, el elemento existe:

if ( $("#undiv").length > 0 ) {
  // hacer algo aquí si el elemento existe
}

Cómo length = 0 se interpreta como valor lógico false y length > 0 se interpreta como true, esta versión tendría el mismo resultado:

if ( $("#undiv").length ) {
  // hacer algo aquí si el elemento existe
}

También podríamos comprobar si el objecto contiene al menos un item:

if ( $("#undiv")[0] ) {
  // hacer algo aquí si el elemento existe
}

Mi elección, por ilustrativa y clara, es if ( $("#undiv").length > 0 ). Más info en la documentación oficial jQuery.length.

  • fitosis

    Hola, y como lo puedo hacer si lo que busco es una clase dinámica? si la clase existe desde un comienzo me funciona, pero si la clase aparece después de un evento no me funciona.

    • Hola!!!

      Es un problema bastante común, pero creo que no hay una solución universal. ¿Podrías poner un ejemplo dónde pueda reproducir el problema?

    • fitosis

      Antes muchas gracias por responder.

      html

      <div id="id" class="clase_dinamica"></div>

      jquery

      if($(".clase_dinamica").length > 0){
          alert("hu"); 
      }

      El problema es que esa “clase_dinamica” aparece una vez que hago clic a otro botón. por lo que estuve leyendo, para eso se puede usar un evento .bind pero, bind funciona de este modo:

      $("#id .clase_dinamica").bind("click", function(){
          // hacer algo aquí si el elemento existe
      });

      no necesito que sea con click, necesito que lo encuentre con un condicional. Se entiende?

      De ante mano muchas gracias!

    • No estoy seguro de entenderte. De todas formas no puedo reproducir el problema con el código que has puesto, por eso decía que pusieras un ejemplo de código con el que pueda reproducir el problema. Si pruebo tu código tal cual, obviamente funciona, ni siquiera tiene la creación dinámica de clases de la que hablas.

    • Esto funciona perfectamente por aquí:

      <div id="myid"></div>
      <script>
      $( '#myid' ).addClass( 'clase_dinamica' );
      if( $( ".clase_dinamica" ).length > 0 ){ 
          alert( "hu" ); 
      }
      </script>

      Y esto también:

      &ltdiv id="myid">&ltbutton id="clickme">Click me!&lt/button>&lt/div>
      &ltscrip>
      $( '#clickme' ).addClass( 'clase_dinamica' );
      $( "#clickme.clase_dinamica" ).bind( "click" , function() {
          alert( "hurra" ); 
      });
      &lt/scrip>

      Así que creo que es problema de que utilizabas un selector con una sintaxis incorrecta, tiene que ser #clickme.clase_dinamica, si lo escribes separado es uno u otro, no los dos a la vez.

    • Butters Stotch

      Hola, primero perdón por contestar tarde, segundo, yo estoy en un proyecto el cual me “obliga” a hacer lo mismo que tú, crear unas clases de forma dínamica, podrías intentar hacer la comprobación de forma dínamica.
      (Me imagino que la comprobación la intentas hacer después de algún evento o función)

      Por ejemplo:
      Haz creado un div y un boton, cuando des click al botón haz que busque esa div de nuevo con una función que reciba ciertos parametros, el cual uno de ellos es la clase o id del div que deseas comprobar su existencia.

      No lo he intentado (pero lo haré), espero te sirva.

  • Gracias…. me funciono…