Cómo obtener el número de elementos que hay en un objeto jQuery, a través de la propiedad length.
Este artículo se escribió cuando existía el método size() de jQuery y a la vez existía la propiedad length, con intención de distinguir estas dos maneras de saber cuántos elementos en la página había dentro de un objeto jQuery, sin embargo, actualmente size() está obsoleto, por lo que tendremos que usar siempre la propiedad length.
Vamos a ver en este artículo cómo obtener el número de elementos que tiene el objeto jQuery. Como pudimos aprender previamente en nuestro manual de jQuery, este framework Javascript tiene como base la llamada "función jQuery" que devuelve el objeto jQuery, en el que hay uno o varios elementos de la página, según el selector que se le haya pasado.
En un pasado artículo de DesarrolloWeb.com ya explicamos con detalle qué era la función jQuery y cómo utilizarla. Pues bien, ahora veremos rápidamente cómo saber cuántos elementos encontramos y seleccionamos por medio de esta función, lo que puede ser útil por diversos motivos al hacer código Javascript.
Método size() del Core de jQuery
ACTUALIZADO: Este es el método que se encuentra obsoleto, por lo que no se puede usar en versiones actuales (versión de jQuery 3 en adelante). Si estás en jQuery 3 Puedes saltar directamente al apartado de la propiedad length.
Este método sirve, como decimos, para obtener el número de elementos seleccionados con la función jQuery. Simplemente devuelve el número de elementos que hay en el objeto, como un entero.
Por ejemplo, veamos este código:
let parrafos = $("p");
alert ("Hay " + parrafos.size() + " párrafos en la página");
Con la primera línea selecciono todos los párrafos de la página y los meto en el objeto jQuery de la variable "parrafos". Mediante la segunda línea muestro el número de párrafos encontrados, con una llamada al método size().
No tiene más misterio, salvo que en jQuery existe otro modo de hacer esto, pero bastante más rápido.
Propiedad length del objeto jQuery
La propiedad length, que existe en cualquier objeto jQuery, nos sirve para obtener el número de elementos de la página que hemos seleccionado. Lo interesante de esta propiedad es que almacena directamente este valor, por lo que es más rápido y más aconsejable que calcular los elementos seleccionados con el método size().
ACTUALIZADO: Nuevamente, no tenemos ya el método size(), así que siempre usaremos length para acceder al número de elementos seleccionados en un objeto jQuery.
Tanto el método size() con la propiedad length devolverán el mismo valor, siendo las únicas diferencias la mencionada rapidez adicional de la propiedad y el acceso a este valor, que como es una propiedad, se accede a través del operador punto, pero sin colocar los paréntesis después de length. Por ejemplo, veamos este código:
let ElementosMitexto = $(".mitexto");
alert ("Hay " + ElementosMitexto.length + " elementos de la clase mitexto");
Con la primera línea estamos utilizando la función jQuery para seleccionar todos los elementos de la página que tienen la clase CSS "mitexto". Con la segunda línea se muestra en una caja de alerta el número de elementos seleccionados con ElementosMitexto.length.
Podemos ver el código completo de una página que hace uso de este método:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>propiedad length</title>
</head>
<body>
<p>Esto es un párrafo normal</p>
<p class="mitexto">Esto es un párrado de la clase "mitexto"</p>
<div>Un div normal</div>
<div class="mitexto">Ahora un div de la clase "mitexto"</div>
<script src="../../js/jquery-3.6.3.js"></script>
<script>
$(document).ready(function () {
//selecciono todos los elementos de la clase "mitexto"
var ElementosMitexto = $(".mitexto");
//muestro el número de los párrafos encontrados
alert("Hay " + ElementosMitexto.length + " elementos de la clase mitexto");
});
</script>
</body>
</html>
Conclusión
Este ha sido un artículo sencillo. De hecho al haberse marcado size() como "deprecated" y haberse eliminado en las últimas versiones de jQuery, se queda todavía menos relevante.
En el próximo artículo vamos a tratar el método data() que tiene muchas aplicaciones en el desarrollo con jQuery que deberías de conocer.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...