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");
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().
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");
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.
Fuente:enlace
No hay comentarios:
Publicar un comentario