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>

Expandir snippet

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

javascript jquery dom

— gautamlakum
fonte

stackoverflow.com/questions/250688/…

— onder

1

Em pura JS, @ resposta de Mo é uma espécie de baixo ainda, mas o usoelement.childelementCount

— Charles L.

602

Você pode usar .lengthapenas um seletor descendente , assim:

var count = $("#selected li").length;

Se você precisar usar .children(), é assim:

var count = $("#selected ul").children().length;

Você pode testar as duas versões aqui .

— Nick Craver
fonte

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>

Expandir snippet

— Mo.
fonte

1

js puro

selected.children[0].children.length;

Mostrar snippet de código

let num = selected.children[0].children.length;

console.log(num);

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

Expandir snippet

— Kamil Kiełczewski
fonte