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

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);

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