Bagaimana cara menghitung jumlah anak?

108

Saya punya daftar

<ul>
  <li>
  <li>
  <li>
  ...
</ul>

Saya membutuhkan jQuery untuk menghitung jumlah item dalam daftar saya.

jquery aneuryzm.dll
sumber
1
lupakan jquerydocument.querySelectorAll('ul li').length
caub

Jawaban:

188

Anda bisa menggunakan .length, seperti ini:

var count = $("ul li").length;

.lengthmemberi tahu berapa banyak kecocokan yang ditemukan selektor, jadi ini menghitung berapa banyak elemen di <li>bawah yang <ul>Anda miliki ... jika ada sub-turunan, gunakan "ul > li"sebagai gantinya untuk hanya mendapatkan turunan langsung . Jika Anda memiliki <ul>elemen lain di halaman Anda, cukup ubah pemilih agar hanya cocok dengan salah satunya, misalnya jika memiliki ID yang akan Anda gunakan "#myListID > li".

Dalam situasi lain di mana Anda tidak mengetahui jenis anak, Anda dapat menggunakan *pemilih (karakter pengganti), atau .children(), seperti ini:

var count = $(".parentSelector > *").length;

atau:

var count = $(".parentSelector").children().length;
Nick Craver
sumber
1
Bagaimana jika, tidak diketahui bahwa anak itu "li", dan bisa jadi apa saja?
Starx
7
@Starx:$("#parent").children().length
rekamoyka
1
@AlecAnanian, Tidak, saya tahu caranya. Maksud saya, saya berharap Nick akan menambahkan itu ke jawabannya juga.
Starx
2
@Starx - ditambahkan seandainya itu membantu beberapa orang di jalan :)
Nick Craver
Bagaimana jika elemen tidak terlihat?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
6

Anda tidak perlu jQuery untuk ini. Anda dapat menggunakan JavaScript .childNodes.length.

Pastikan untuk mengurangi 1 jika Anda tidak ingin menyertakan node teks default (yang secara default kosong). Jadi, Anda akan menggunakan yang berikut ini:

var count = elem.childNodes.length - 1;
Zach Saucier
sumber
1

Cobalah untuk menggunakan: 

var count = $("ul > li").size();
alert(count);

sumber
0

Bagaimana jika Anda menggunakan ini untuk menentukan pemilih saat ini untuk menemukan anaknya jadi ini berlaku: <ol>maka ada <li>di bawah cara menulis pemilih var count = $(this+"> li").length;tidak akan bekerja ..

Oguzhan
sumber
jika ol memiliki kelas, Anda dapat menulis$("ol.class > li").length
Qwerty
0

Anda dapat melakukan ini menggunakan jQuery:

Metode ini mendapatkan daftar turunannya kemudian menghitung panjang daftar itu, sesederhana itu.

$("ul").find("*").length;

Metode find () melintasi DOM ke bawah sepanjang turunan, hingga ke turunan terakhir.

Catatan: metode children () melintasi satu tingkat di bawah pohon DOM.

Youssof H.
sumber