jQuery đếm các phần tử con

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

Tôi muốn đếm tổng số <li>phần tử trong <div id="selected"></div>. Làm thế nào là có thể sử dụng jQuery .children([selector])?

Bạn có thể sử dụng .lengthchỉ với một bộ chọn hậu duệ , như thế này:

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

Nếu bạn phải sử dụng .children(), thì nó sẽ như thế này:

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

Bạn có thể kiểm tra cả hai phiên bản tại đây .

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

hoặc là:

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

nhanh nhất

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

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

Bạn có thể cũng có thể bỏ qua li trong bộ chọn của trẻ em.

Xem .length.

Bạn có thể sử dụng JavaScript (không cần jQuery)

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

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

hoặc thậm chí tốt hơn

 $('#selected li').length;

Nó chỉ đơn giản là có thể với childElementCounttrong javascript thuần

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>

js tinh khiết

selected.children[0].children.length;

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>