Elementos filho da contagem de jQuery

324

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

Quero contar o número total de <li>elementos <div id="selected"></div>. Como isso é possível usando o jQuery .children([selector])?

gautamlakum
fonte
1
Em pura JS, @ resposta de Mo é uma espécie de baixo ainda, mas o usoelement.childelementCount
Charles L.

Respostas:

30
$("#selected > ul > li").size()

ou:

$("#selected > ul > li").length
bcosca
fonte
10
Apenas um .size nota () foi preterido em favor de .length
Eric Kigathi
18

mais rápido:

$("div#selected ul li").length
Ali Tarhini
fonte
2
Isso não é o mais rápido, na verdade, você diminuiu a velocidade adicionando divlá :) #
911 Nick Craver
1
Realmente depende de qual navegador você usa. Em muitos navegadores modernos, adicionar o elemento usa findByElement antes de localizar por ID ou classe, que é mais lento. Em breve, este será um ponto discutível de qualquer maneira, porque todas as pesquisas no DOM serão feitas usando uma função nativa. De qualquer forma, um simples getElementById ('selected') ou $ ('# selected') seria mais rápido nesse momento.
Alex K
14
var length = $('#selected ul').children('li').length
// or the same:
var length = $('#selected ul > li').length

Você provavelmente também pode omitir lio seletor infantil.

Veja .length.

Felix Kling
fonte
13

Você pode usar JavaScript (não precisa de jQuery)

document.querySelectorAll('#selected li').length;
Vng Văn Thanh
fonte
12
$('#selected ul').children().length;

ou melhor ainda

 $('#selected li').length;
Martin Algesten
fonte
4

É simplesmente possível com childElementCountjavascript puro

var countItems = document.getElementsByTagName("ul")[0].childElementCount;
console.log(countItems);
<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

Mo.
fonte
1

js puro

selected.children[0].children.length;

Kamil Kiełczewski
fonte