jQuery: Đếm số lượng phần tử danh sách?

134

Tôi đã có một danh sách được tạo từ một số mã phía máy chủ, trước khi thêm các thứ bổ sung vào nó bằng jQuery, tôi cần phải tìm ra có bao nhiêu mục đã có trong đó.

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

jquery html

— Tom
nguồn

225

Thử:

$("#mylist li").length

Chỉ tò mò: tại sao bạn cần biết kích thước? Bạn không thể sử dụng:

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

?

— cletus
nguồn

3

Tôi đang sử dụng để thêm các mục mới, nhưng tôi đã giới hạn số lượng mục có thể có trong danh sách, ở trạng thái này, người dùng vẫn có thể thêm tối đa 4 mục, nhưng 2 có thể đã đến từ trạng thái trước. :)

— Tom

35

Lưu ý rằng các tài liệu jQyery khuyên bạn nên sử dụng .lengthhơn .size()để tránh chi phí của một lệnh gọi hàm. api.jquery.com/size

— Joe

4

size () không được dùng trong jquery 1.8 và nó nói sử dụng length () ngay bây giờ.

— ảm đạm.penguin

8

@ gloomy.penguin Lưu ý rằng đó .lengthkhông phải là một chức năng.

— hexacyanide

Tôi cần số <li> để tính lại độ rộng phần tử khi đang bay.

— Hristo

51

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

var count = listItems.length;

Tất nhiên bạn có thể ngưng tụ điều này với

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

Để được trợ giúp thêm với jQuery, http://docs.jquery.com/Main_Page là một nơi tốt để bắt đầu.

— Nick Allen
nguồn

5

để an toàn, hãy làm $ ("# myList"). children ("li"). length; Nếu bạn từng thêm các mục khác trong danh sách vì bất kỳ lý do gì, bạn sẽ không quên dòng mã nhỏ này.

— SgtPooki

10

Bạn có kết quả tương tự khi gọi phương thức .size () hoặc thuộc tính .length nhưng thuộc tính .length được ưa thích vì nó không có chi phí chung của một lệnh gọi hàm. Vì vậy, cách tốt nhất:

$("#mylist li").length

— Alex Nguyễn
nguồn

4

Tôi nghĩ rằng điều này nên làm điều đó:

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

— Andrew Barrett
nguồn

4

và tất nhiên như sau:

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

có thể được cô đọng xuống: (bằng cách loại bỏ 'var' không cần thiết để đặt biến)

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

tuy nhiên cái này sạch hơn:

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

— ROARSTAR
nguồn

2

Không phải phương pháp này cũng tính các thẻ li trong các phần tử ul của phần tử trên cùng sao?

— atripes

2

Nói "'var" là không cần thiết để đặt biến "là quá đơn giản. Nếu bạn không sử dụng 'var', tất cả các varibles của bạn sẽ kết thúc trên toàn cầu. Xem stackoverflow.com/questions/1470488/ Mạnh

— Rafael Almeida

3

thử

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

— Nui_CpE
nguồn

1

Đếm số lượng phần tử danh sách

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

— M.Ganji
nguồn

1

Một cách tiếp cận khác để đếm số phần tử danh sách:

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>

Mở rộng đoạn trích

— Penny Lưu
nguồn

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>

Mở rộng đoạn trích

— Bashirpour
nguồn