jQuery计数子元素

Question

<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])？

Answer 1

您可以.length只使用descendant selector，如下所示：

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

如果你必须使用.children()，那就是这样的：

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

You can test both versions here

Answer 2

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

或：

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

Answer 3

最快的一个：

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

Answer 4

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

你可能也可以在孩子的选择器中省略li。

请参阅.length。

Answer 5

您可以使用JavaScript（不需要jQuery）

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

Answer 6

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

甚至更好

 $('#selected li').length;

Answer 7

纯粹的javascript中只有childElementCount

＆＃13;

＆＃13;

var countItems = document.getElementsByTagName("ul")[0].childElementCount;
console.log(countItems);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 8

纯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>