jQuery підраховує дочірні елементи

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

Я хочу порахувати загальну кількість <li>елементів у <div id="selected"></div>. Як це можливо за допомогою jQuery's .children([selector])?

Ви можете використовувати .lengthлише селектор нащадків , як-от так:

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

Якщо вам доведеться користуватися .children(), то це так:

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

Ви можете протестувати обидві версії тут .

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

або:

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

найшвидший:

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

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

Напевно, ви могли також пропустити liу дитячому селекторі.

Див .length.

Ви можете використовувати JavaScript (не потрібен jQuery)

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

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

а ще краще

 $('#selected li').length;

Це просто можливо за допомогою childElementCountчистого JavaScript

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

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>