Como contar los LI

fcosun · #1 (**permalink**) 26/03/2012, 17:51

Pongo este ejemplo de lista, puede ser cualquier componente del html, la idea basicamente es como contar la cantidad de Li que esta disponible.

por ejemplo aca yo se que tengo 3 LI.

Código Javascript:

Ver original<ul>
        <li>Este es el primer item de mi lista</li>
        <li>Segundo item</li>
        <li>Tercero</li>
</ul>

Pero sucede que estos LI pueden ser dinamicos.

Entonces yo lo que haria seria recorrerlos con algun bucle.

pero como obtengo ese metodo que es parecido a este que se usa para contar letras
length.

entonces yo podria recorrer segun la cantidad final length que aparezca..

zerokilled · #2 (**permalink**) 26/03/2012, 18:00

¡buenas!
deberías leer más sobre DOM. en tu caso te debe servir getElementsByTagName el cual devuelve una lista del elemento indicado. la función te devuelve un objeto parecido a un array del que luego puedes leer la propiedad length.

emprear · #3 (**permalink**) 26/03/2012, 18:25

Ejemplo (estaba redactando mientras @zerokilled se me adelanto

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Contar elementos</title>
<meta name="description" content="Contar elementos" />
<script type="text/javascript">
//<![CDATA[
var tags_li = new Array();
function dli() {
var tags_li=document.getElementsByTagName('li');
var i;
for (i=0; i<tags_li.length; i++) {
// suma i
}
alert('La cantidad de <li> en toda la página es de ' + i);
}
 
// con una clase específica
var tags_li2 = new Array();
function dli2(clase) {
var tags_li2=document.getElementsByTagName('li');
var n = 0;
var i;
for (i=0; i<tags_li2.length; i++) {
if (tags_li2[i].className==clase) {
n++;
}
}
alert('La cantidad de <li class="' + clase + '"> en el documento es ' + n);
}
//]]>
</script>
</head>
<body onload="dli(); dli2('a');">
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<hr />
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="a">4</li>
<li class="a">5</li>
<li class="a">6</li>
</ul>
</div>
</body>
</html>

Saludos

fcosun · #4 (**permalink**) 27/03/2012, 12:04

Gracias zerokilled y emprear que novedoso es el ejemplo practico es impresionante.