jQuery：计算列表元素的数量？

【问题标题】：jQuery: Count number of list elements?jQuery：计算列表元素的数量？
【发布时间】：2010-10-10 23:54:10
【问题描述】：

我有一个从一些服务器端代码生成的列表，在使用 jQuery 向其中添加额外内容之前，我需要弄清楚其中已有多少项。

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

【问题讨论】：

标签： jquery html

【解决方案1】：

试试：

$("#mylist li").length

只是好奇：为什么需要知道尺寸？你不能只使用：

$("#mylist").append("<li>New list item</li>");

【讨论】：

我正在使用附加来添加新的，但我对列表中可以包含的项目数量有限制，在这种状态下，用户仍然可以添加最多4 个项目，但 2 个可能来自之前的状态。 :)
请注意，jQyery 文档建议使用 .length 而不是 .size() 以避免函数调用的开销。 api.jquery.com/size
size() was deprecated in jquery 1.8 它说现在使用length()。
@gloomy.penguin 注意.length 不是函数。
我需要
计数以便即时重新计算元素宽度。

【解决方案2】：

var listItems = $("#myList").children();

var count = listItems.length;

当然你可以把它压缩成

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

如需更多关于 jQuery 的帮助，http://docs.jquery.com/Main_Page 是一个不错的起点。

【讨论】：

为了安全起见，请执行 $("#myList").children("li").length;如果您出于任何原因在列表中添加其他项目，您将不会忘记这一小行代码。

【解决方案3】：

调用 .size() 方法或 .length 属性时会得到相同的结果，但首选 .length 属性，因为它没有函数调用的开销。所以最好的方法：

$("#mylist li").length

【讨论】：

【解决方案4】：

我认为应该这样做：

var ct = $('#mylist').children().size();

【讨论】：

【解决方案5】：

当然还有以下：

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

可以浓缩为：（通过删除不需要设置变量的'var'）

count = $("#myList").children().length;

不过这样更干净：

count = $("#mylist li").size();

【讨论】：

这个方法不也是计算top ul的子ul-elements中的li-tags吗？
说“'var' 不是设置变量的必要条件”过于简单化了。如果你不使用'var'，你所有的变量最终都会是全局的。见stackoverflow.com/questions/1470488/…

【解决方案6】：

试试

$("#mylist").children().length

【讨论】：

【解决方案7】：

计算列表元素个数

alert($("#mylist > li").length);

【讨论】：

【解决方案8】：

另一种计算列表元素数量的方法：

var num = $("#mylist").find("li").length;
console.log(num);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
</ul>

【讨论】：

【解决方案9】：

$("button").click(function(){
    alert($("li").length);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Count the number of specific elements</title>
</head>
<body>
<ul>
  <li>List - 1</li>
  <li>List - 2</li>
  <li>List - 3</li>
</ul>
  <button>Display the number of li elements</button>
</body>
</html>

【讨论】：