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를 사용하여 어떻게 가능 .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순수한 자바 스크립트로 간단하게 가능합니다.

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>