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

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