jQuery: ¿Hay un Elemento?

A veces, queremos usar jQuery para verificar si existe un elemento en la página actual. Por ejemplo, para cargar un elemento solo si aún no está presente.

Para hacer eso, podemos trabajar con la propiedad "length" que nos proporciona cada selector de jQuery.

El truco: Al crear un selector, jQuery almacena todos los elementos coincidentes en una array. Si tenemos un selector arbitrario, podemos consultar la longitud de esta matriz a través de ".length". Si la longitud es 0, sabemos que no hay elementos que se ajusten al selector respectivo, por lo que el elemento en cuestión no es existente.

Elementos con una ID específica

Veamos un ejemplo para esto. A continuación, nos gustaría verificar la presencia de un elemento con una ID determinada:

if ($('#a').length == 0) {
  alert('El elemento con la ID "a" no existe.');
}

if ($('#b').length > 0) {
  alert('El elemento con la ID "a" existe.');
}

El selector jQuery para IDs coloca un rombo frente al nombre de la ID correspondiente. En consecuencia, con este código verificamos si hay elementos de los ID "a" o "b" en nuestra página. En el primer ejemplo, nos gustaría emitir un mensaje si no hay un elemento con la ID "a" (la longitud de la array es 0 en ese caso). En el segundo ejemplo, revertimos la consulta y nos gustaría mostrar el mensaje en caso de que haya un elemento con la ID "b" (la longitud de la array debe ser mayor que 0 en este caso).

Elementos con una Clase específica o un Tipo de Elemento específico

Más allá de verificar que los elementos individuales tengan una ID específica, también podemos usar cualquier otro selector de jQuery que podamos imaginar. Por lo tanto, por ejemplo, también podemos verificar la presencia de elementos con ciertas clases o un cierto tipo simplemente usando el selector correspondiente para él:

if ($('.c').length > 0) {
  alert('Al menos un elemento con la clase "c" está disponible.');
}

if ($('img').length > 0) {
  alert('La página contiene ' + $('img').length + ' imágenes.');
}

if ($('h2').length == 0) {
  alert('No hay encabezados H2 en esta página.');
}

if ($('#a.b').length > 0) {
  alert('El elemento con la ID "a" ha asignado la clase "b".');
}

if ($('ul>li').length > 0) {
  alert('Hay ' + $('ul>li').length + ' elementos LI por debajo de UL.');
}

Con estos ejemplos, verificamos si hay elementos de la clase "c", imágenes o cabezas de H2 en la página (en el caso de las imágenes, también mostramos el número de imágenes encontradas). También probamos si hay un elemento con la ID "a" a la que se asigna la clase "b" y cuántos elementos de LI hay dentro de las listas UL.

Como puede ver: Todos los selectores jQuery típicos son posibles.