Como posso contar o número de filhos?

108

Eu tenho uma lista

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

Preciso que o jQuery conte o número de itens da minha lista.

jquery

— aneuryzm
fonte

1

esqueça jquerydocument.querySelectorAll('ul li').length

— caub

188

Você pode usar .length, assim:

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

.lengthinforma quantas correspondências o seletor encontrou, então isso conta quantos elementos <li>under <ul>você tem ... se houver sub-filhos, use "ul > li"para obter apenas os filhos diretos . Se você tiver outros <ul>elementos em sua página, basta alterar o seletor para corresponder apenas ao seu, por exemplo, se ele tiver um ID que você usaria "#myListID > li".

Em outras situações em que você não conhece o tipo de filho, você pode usar o *seletor (curinga) ou .children(), desta forma:

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

ou:

var count = $(".parentSelector").children().length;

— Nick Craver
fonte

1

E se não se sabe que a criança é "li" e pode ser alguma coisa?

— Starx

7

@Starx:$("#parent").children().length

— rekamoyka

1

@AlecAnanian, Não, eu sei como. Quer dizer, eu esperava que Nick também acrescentasse isso à sua resposta.

— Starx

2

@Starx - adicionado no caso de ajudar algumas pessoas no caminho :)

— Nick Craver

E se o elemento não estiver visível?

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

6

Você não precisa do jQuery para isso. Você pode usar o JavaScript .childNodes.length.

Apenas certifique-se de subtrair 1 se você não quiser incluir o nó de texto padrão (que está vazio por padrão). Assim, você usaria o seguinte:

var count = elem.childNodes.length - 1;

— Zach Saucier
fonte

1

Tente usar:

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

0

E se você estiver usando isso para determinar o seletor atual para encontrar seus filhos, então isso vale: <ol>então há <li>instruções sobre como escrever um seletor que var count = $(this+"> li").length;não funcionará.

— Oguzhan
fonte

se o velho tiver uma aula, você pode escrever$("ol.class > li").length

— Qwerty

0

Você pode fazer isso usando jQuery:

Esse método obtém uma lista de seus filhos e, em seguida, conta o comprimento dessa lista, tão simples quanto isso.

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

O método find () percorre o DOM para baixo ao longo dos descendentes, até o último descendente.

Observação: o método children () percorre um único nível abaixo da árvore DOM.

— Youssof H.
fonte