jQuery cuenta elementos secundarios

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 fragmento

Quiero contar la cantidad total de <li>elementos en <div id="selected"></div>. ¿Cómo es eso posible usando jQuery's .children([selector])?

javascript jquery dom

— gautamlakum
fuente

stackoverflow.com/questions/250688/...

— onder

1

En JS puro, la respuesta de @ Mo. es un poco baja todavía, pero useelement.childelementCount

— Charles L.

602

Puede usar .lengthsolo un selector descendente , como este:

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

Si tiene que usar .children(), entonces es así:

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

Puedes probar ambas versiones aquí .

— Nick Craver
fuente

30

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

o:

$("#selected > ul > li").length

— bcosca
fuente

10

Solo una nota .size () ha quedado en desuso a favor de .length

— Eric Kigathi

18

el más rápido

$("div#selected ul li").length

— Ali Tarhini
fuente

2

Este no es el más rápido, de hecho lo desaceleró agregando divallí :)

— Nick Craver

1

Realmente depende del navegador que uses. En muchos navegadores modernos, agregar el elemento usa findByElement antes de buscar por id o clase, que es más lento. Sin embargo, pronto será un punto discutible de cualquier manera, porque todas las búsquedas DOM se realizarán utilizando una función nativa. En cualquier caso, un simple getElementById ('selected') o $ ('# selected') sería más rápido en este punto.

— Alex K

14

var length = $('#selected ul').children('li').length
// or the same:
var length = $('#selected ul > li').length

Probablemente también podría omitir lien el selector de niños.

Ver .length.

— Felix Kling
fuente

13

Puede usar JavaScript (no necesita jQuery)

document.querySelectorAll('#selected li').length;

— Đặng Văn Thanh
fuente

12

$('#selected ul').children().length;

o mejor

 $('#selected li').length;

— Martin Algesten
fuente

4

Es simplemente posible con 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 fragmento

— Mes.
fuente

1

js puro

selected.children[0].children.length;

Mostrar fragmento 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 fragmento

— Kamil Kiełczewski
fuente