jQuery: Hitung jumlah elemen daftar?

135

Saya punya daftar yang dihasilkan dari beberapa kode sisi server, sebelum menambahkan barang tambahan ke dalamnya dengan jQuery saya perlu mencari tahu berapa banyak item yang sudah ada di dalamnya.

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>
jquery html Tom
sumber

Jawaban:

225

Mencoba:

$("#mylist li").length

Penasaran saja: kenapa Anda perlu tahu ukurannya? Tidak bisakah Anda menggunakan:

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

?

cletus
sumber
3
Saya menggunakan appending untuk menambahkan yang baru, tetapi saya memiliki batasan jumlah item yang dapat masuk dalam daftar, dalam kondisi ini pengguna masih dapat menambahkan hingga maksimal 4 item, tetapi 2 mungkin telah datang dari keadaan sebelumnya. :)
Tom
35
Perhatikan bahwa dokumen jQyery merekomendasikan penggunaan .lengthover .size()untuk menghindari overhead pemanggilan fungsi. api.jquery.com/size
Joe
4
size () tidak digunakan lagi di jquery 1.8 dan dikatakan untuk menggunakan length () sekarang.
gloomy.penguin
8
@ gloomy.penguin Catatan itu .lengthbukan fungsi.
hexacyanide
Saya membutuhkan <li> menghitung untuk menghitung ulang lebar elemen dengan cepat.
Hristo
51 
var listItems = $("#myList").children();

var count = listItems.length;

Tentu saja Anda bisa menyingkatnya dengan

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

Untuk bantuan lebih lanjut dengan jQuery, http://docs.jquery.com/Main_Page adalah tempat yang baik untuk memulai.

Nick Allen
sumber
5
agar aman, lakukan $ ("# myList"). children ("li"). length; Jika Anda pernah menambahkan item lain di dalam daftar karena alasan apa pun, Anda tidak akan melupakan baris kode kecil ini.
SgtPooki
10

Anda mendapatkan hasil yang sama saat memanggil metode .size () atau properti .length tetapi properti .length lebih disukai karena tidak memiliki overhead panggilan fungsi. Jadi cara terbaik:

$("#mylist li").length
Alex Nguyen
sumber
4

Saya pikir ini harus dilakukan:

var ct = $('#mylist').children().size();
Andrew Barrett
sumber
4

dan tentu saja berikut ini:

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

dapat diringkas menjadi: (dengan menghapus 'var' yang tidak diperlukan untuk menyetel variabel)

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

namun ini lebih bersih: 

count = $("#mylist li").size();
ROARSTAR
sumber
2
Bukankah metode ini juga menghitung li-tag dalam elemen ul anak dari ul atas?
atripes
2
Mengatakan "'var' tidak perlu untuk menyetel variabel" terlalu menyederhanakan. Jika Anda tidak menggunakan 'var', semua variabel Anda akan menjadi global. Lihat stackoverflow.com/questions/1470488/…
Rafael Almeida
3

mencoba

$("#mylist").children().length
Nui_CpE
sumber
1

Hitung jumlah elemen daftar

alert($("#mylist > li").length);
M. Ganji
sumber
1

Pendekatan lain untuk menghitung jumlah elemen daftar:

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>
Luaskan cuplikan

Penny Liu
sumber
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>
Luaskan cuplikan

Mahdi Bashirpour
sumber