Método size() y propiedad length del core de jQuery

  • Por
Dos formas de acceder al número de elementos que hay en un objeto jQuery, a través del método size() y 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

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:

var 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.

Podemos ver una página en marcha con este ejemplo de uso de size().

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().

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:

var 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:

<html>
<head>
   <title>propiedad length del core jQuery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></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>
</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>
</body>
</html>

Para acabar, dejamos el enlace a una página donde se puede ver el ejemplo de la propiedad length del objeto jQuery en funcionamiento.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

ManuKadi

17/10/2011
.lenght
Hola, probando los ejemplitos del articulo, a la hora de acceder al numero de elementos mediante la propiedad .lenght me comenta que el numero de parrafos indefinido.

Seguro que no estoy haciendo algo bien y será una tonteria, pero llevo ya un rato revisando el codigo y no doy con la tecla. Un saludo y gracias.


<!DOCTYPE html>
<html>
<head>
<title>Sortable</title>
<script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js" type="text/javascript" language="JScript"></script>
<!--link rel="stylesheet" href="css/style3.css" type="text/css"-->
<script>
$(document).ready(function(){
$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});
var parrafos = $("p");
alert ("Hay " + parrafos.size() + " párrafos en la página");
alert ("Hay " + parrafos.lenght + " párrafos en la página");
});
</script>
</head>
<body>
<p>Primer párrafo</p>
<p>Otro párrafo</p>
<p>Tecer párrafo</p>
<p>Uno más</p>
<p>y acabo...</p>
</body>
</html>

Sting92

03/12/2011
Para ManuKadi
Hola, bueno revisando el código anterior en esta parte ahy un error de escritura minuscula que es:

var parrafos = $("p");
alert ("Hay " + parrafos.size() + " párrafos en la página");
alert ("Hay " + parrafos.lenght + " párrafos en la página");
});

Se escribe length y no lenght como habias escrito, cambialo y te funcionara el script, saludos.

Carlos

07/11/2013
No me funciona
Estuve probando un ejemplo parecido para contar (es un ejemplo) si mi web tiene más de 10 imágenes, lo dejé así:

$(document).ready(function(){
var imagenes = $("img");
if (imagenes.length > 10){
alert("tienes más de 10 imágenes");
}
});

y me funciona dentro de un html, pero lo estoy intentando implementar dentro de un sitio web y me arroja el siguiente error:

Uncaught TypeError: Cannot read property 'length' of null

Llego una semana intentando entender esto pero la verdad no logro comprender el por qué.

Espero puedan orientarme, saludos y gracias.

Cecidise

25/6/2014
Diferencias
Hola, qué tal?
Escribo para comentar que no me resulta muy clara la diferencia, más que entender que uno tarda más que otro en tomar los valores... digo esto porque probé de reemplazar el caso de length, poniendo el size() y funcionan los dos por igual...
Se podrá poner otro ejemplo?... gracias!