¿Cómo puedo contar el número de niños?

108

Tengo una lista

<ul>
  <li>
  <li>
  <li>
  ...
</ul>

Necesito jQuery para contar la cantidad de elementos en mi lista.

jquery aneuryzm
fuente
1
olvide jquerydocument.querySelectorAll('ul li').length
caub

Respuestas:

188

Puedes usar .length, así:

var count = $("ul li").length;

.lengthindica cuántas coincidencias encontró el selector, por lo que cuenta cuántos elementos <li>inferiores <ul>tiene ... si hay sub-hijos, utilice "ul > li"en su lugar para obtener solo hijos directos . Si tiene otros <ul>elementos en su página, simplemente cambie el selector para que coincida solo con el suyo, por ejemplo, si tiene un ID que usaría "#myListID > li".

En otras situaciones en las que no conoce el tipo de hijo, puede usar el *selector (comodín) o .children(), así:

var count = $(".parentSelector > *").length;

o:

var count = $(".parentSelector").children().length;
Nick Craver
fuente
1
¿Y si no se sabe que el niño es "li" y podría ser cualquier cosa?
Starx
7
@Starx:$("#parent").children().length
rekamoyka
1
@AlecAnanian, No, sé cómo. Quiero decir, esperaba que Nick también añadiera eso a su respuesta.
Starx
2
@Starx - agregado en caso de que ayude a algunas personas en el futuro :)
Nick Craver
¿Qué pasa si el elemento no es visible?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
6

No necesitas jQuery para esto. Puede utilizar JavaScript.childNodes.length .

Solo asegúrese de restar 1 si no desea incluir el nodo de texto predeterminado (que está vacío de manera predeterminada). Por lo tanto, usaría lo siguiente:

var count = elem.childNodes.length - 1;
Zach Saucier
fuente
1

Intenta empezar a usar: 

var count = $("ul > li").size();
alert(count);

fuente
0

¿Qué sucede si está usando esto para determinar el selector actual para encontrar sus hijos, de modo que esto se mantenga? <ol>Entonces, hay un <li>mensaje debajo de cómo escribir un selector que var count = $(this+"> li").length;no funcionará ...

Oguzhan
fuente
si el ol tiene una clase, puede escribir$("ol.class > li").length
Qwerty
0

Puedes hacer esto usando jQuery:

Este método obtiene una lista de sus hijos y luego cuenta la longitud de esa lista, tan simple como eso.

$("ul").find("*").length;

El método find () atraviesa DOM hacia abajo a lo largo de los descendientes, hasta el último descendiente.

Nota: el método children () atraviesa un solo nivel en el árbol DOM.

Youssof H.
fuente