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>