jQuery: Contar Elementos, Imágenes, Clases, etc.

Cada selector de jQuery es también una matriz / array de elementos relacionados y tiene la propiedad "length". Podemos hacer uso de eso para determinar la cantidad de ciertos elementos de un sitio web.

Con este método es posible contar todo lo que podemos seleccionar con jQuery: el número de imágenes, el número de encabezados, el número de elementos p, el número de enlaces, el número de elementos con un ID o clase determinado, otros construcciones combinadas más complicadas y mucho más.

Primero, veamos un ejemplo simple:

var numero = $('img').length;

alert("La página contiene " + numero + " imágenes.");

Con el selector $('img'), seleccionamos todas las imágenes de la página actual (las imágenes están marcadas con la etiqueta "img" en HTML, siempre que no estén incrustadas como imagen de fondo de un elemento a través de "background-image" o similar). Después de eso, mostramos una alerta que muestra la cantidad de imágenes.

Más Ejemplos

Veamos algunos ejemplos más de cómo determinar la cantidad de elementos con una ID determinada o clases determinadas:

var num1 = $('.a').length;
var num2 = $('#b').length;
var num3 = $('.c.d').length;

Aquí, en primer lugar, determinamos el número de elementos con la clase "a", luego todos los elementos con el ID "b" y finalmente todos los elementos que tienen asignadas las clases "c" y "d".

Puede usar cada selector jQuery que pueda imaginar para esto.

Comprobar si existe un Elemento determinado

Incluso si no estamos interesados en el número exacto de un elemento determinado o de un grupo de elementos determinado, sino que solo queremos saber si uno de estos elementos existe en nuestra página web, podemos trabajar con el método presentado aquí. Sólo tenemos que comprobar si .length es 0 o mayor que 0, para saber si existen elementos de este tipo o no.