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>

我想要计算<div id="selected"></div>中<li>元素的总数，如何使用jQuery的.children([selector])实现呢？

- gautamlakum

---

https://dev59.com/x7enzYgBFxS5KdRjUdqn - onder

在纯JS中，@Mo的答案还有点不够好，但可以使用element.childelementCount。 - Charles L.

Answer 1

您可以仅使用后代选择器descendant selector，如下所示使用.length：

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

如果你必须使用 .children()，那么它应该是这样的：

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

You can test both versions here.

- Nick Craver

Answer 2

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

或者：

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

- bcosca

---

仅提示，.size()已经被弃用，应使用.length。 - Eric Kigathi

所以重要的是长度，而不是大小。 ;) - CJWEB

@CJWEB：你是在说“大小”不再重要了吗？ - Ingmar

@CJWEB：你是在说“大小”不再重要了吗？ - undefined

Answer 3

最快的方法：

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

- Ali Tarhini

---

这并不是最快的，实际上你通过添加 div 使它变慢了 :) - Nick Craver

这真的取决于您使用哪个浏览器。在许多现代浏览器中，添加元素会在查找id或class之前使用findByElement，这会更慢。不过很快这将成为一个无关紧要的问题，因为所有DOM搜索都将使用一个本地函数完成。无论如何，在这一点上，一个简单的getElementById('selected')或$('#selected')会更快。 - Alex K

Answer 4

你可以使用JavaScript（无需jQuery）

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

- Đặng Văn Thanh

Answer 5

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

你可能还可以在子选择器中省略 li。

请参阅.length。

- Felix Kling

Answer 6

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

甚至更好

 $('#selected li').length;

- Martin Algesten

Answer 7

使用纯javascript，可以通过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>

- Mo.

Answer 8

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

- Kamil Kiełczewski