Número de elementos de una lista con jQuery

En algunas de nuestras páginas web tendremos listados de elementos que se componen de forma dinámica. Por ejemplo, podemos tener los artículos que el usuario ha ido seleccionando en nuestra web y que ha ido introduciendo en el “carrito de la compra”.

Estos elementos irán creciendo y decreciendo de forma dinámica. Mediante jQuery tenemos una forma muy sencilla de saber el número de elementos de una lista y así tener ese control de elementos en el lado del cliente.

Crear la Lista

Lo primero que tenemos que hacer para saber el número de elementos de una lista con jQuery será crear una lista. Daremos un ID a la lista, para acceder de una forma sencilla desde nuestro código jQuery.

<ul id="lista">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ul>

Aunque hemos creado la lista de forma manual y estática en HTML, es muy probable que en nuestras aplicaciones se conforme de forma dinámica ya sea en el cliente o en el servidor.

La Función .size()

Lo siguiente será insertar el código jQuery que nos calcule el número de elementos de una lista. Como siempre, el código jQuery lo insertamos en la función .ready().

$(document).ready(function(){
 // Código jQuery
});

En este caso nos apoyaremos en la función .size() del elemento HTML en cuestión. Es decir, al ser una lista sería sobre LI y al haberle dado el ID “lista”, el selector sería de la siguiente forma:

$("#lista li").size();

Mostrar el Resultado

Lo que vamos a hacer ahora será volcar el contenido a una capa. En este caso nos apoyamos en la función .html(). El código final nos queda de la siguiente forma:

$(document).ready(function(){
 $("#numero_elementos").html($("#lista li").size());
});

Eso sí, no os olvidéis crear un elemento “numero_elementos” para poder volcar el contenido. ;-)

Numero de elementos: <span id="numero_elementos"></span>