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

134

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

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

jquery html

— 汤姆
source

225

尝试：

$("#mylist li").length

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

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

？

— 克莱图斯
source

3

我正在使用添加来添加新项，但是我对列表中的项数有所限制，在这种状态下，用户最多仍可以添加4个项，但可能有2个从以前的状态开始。:)

— 汤姆（Tom）2009年

35

请注意，jQyery文档建议使用.lengthover .size()以避免函数调用的开销。api.jquery.com/size

— 乔

4

在jQuery 1.8中不推荐使用size（），它说现在使用length（）。

— gloomy.penguin

8

@ gloomy.penguin注意这.length不是一个函数。

— 六

我需要<li>计数，以便即时重新计算元素宽度。

— 赫里斯特

51

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

var count = listItems.length;

当然你可以用

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

要获取有关jQuery的更多帮助，http：//docs.jquery.com/Main_Page是一个不错的起点。

— 尼克·艾伦
source

5

为了安全起见，请执行$（“＃myList”）。children（“ li”）。length; 如果您出于任何原因在列表中添加了其他项目，则不会忘记这一小段代码。

— SgtPooki

10

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

$("#mylist li").length

— 亚历克斯·阮
source

4

我认为应该这样做：

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

— 安德鲁·巴雷特
source

4

当然还有以下内容：

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

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

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

但这更干净：

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

— 雄狮
source

2

此方法是否还计算顶部ul的子ul元素中的li标签？

— atripes

2

说“不需要'var'来设置变量”太简单了。如果您不使用“ var”，则所有变量都将成为全局变量。参见stackoverflow.com/questions/1470488/…–

— 拉斐尔·阿尔梅达

3

尝试

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

— Nui_CpE
source

1

计算列表元素的数量

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

— 甘吉
source

1

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

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>

展开摘要

— 刘佩妮
source

0

$("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>

展开摘要

— 巴希普尔
source