jQuery menghitung elemen anak

324

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

Luaskan cuplikan

Saya ingin menghitung jumlah <li>elemen dalam <div id="selected"></div>. Bagaimana mungkin menggunakan jQuery .children([selector])?

javascript jquery dom

— gautamlakum
sumber

stackoverflow.com/questions/250688/…

— onder

1

Dalam JS murni, jawaban Mo. agak rendah, tetapi gunakanelement.childelementCount

— Charles L.

602

Anda dapat menggunakan .lengthhanya dengan pemilih keturunan , seperti ini:

var count = $("#selected li").length;

Jika Anda harus menggunakan .children(), maka seperti ini:

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

Anda dapat menguji kedua versi di sini .

— Nick Craver
sumber

30

$("#selected > ul > li").size()

atau:

$("#selected > ul > li").length

— bcosca
sumber

10

Hanya sebuah catatan .size () telah ditinggalkan karena mendukung

— .length

18

yang tercepat:

$("div#selected ul li").length

— Ali Tarhini
sumber

2

Ini bukan yang tercepat, bahkan Anda memperlambatnya dengan menambahkan divdi sana :)

— Nick Craver

1

Itu sangat tergantung pada browser yang Anda gunakan. Di banyak browser modern, menambahkan elemen menggunakan findByElement sebelum menemukan oleh id atau kelas, yang lebih lambat. Namun, segera ini akan menjadi titik perdebatan, karena semua pencarian DOM akan dilakukan menggunakan satu fungsi asli. Bagaimanapun, getElementById ('terpilih') sederhana atau $ ('# terpilih') akan lebih cepat pada titik ini.

— Alex K

14

var length = $('#selected ul').children('li').length
// or the same:
var length = $('#selected ul > li').length

Anda mungkin juga bisa menghilangkan lipemilih anak-anak.

Lihat .length.

— Felix Kling
sumber

13

Anda dapat menggunakan JavaScript (tidak perlu jQuery)

document.querySelectorAll('#selected li').length;

— Đặng Văn Thanh
sumber

12

$('#selected ul').children().length;

atau bahkan lebih baik

 $('#selected li').length;

— Martin Algesten
sumber

4

Sangat mungkin dengan childElementCountjavascript murni

var countItems = document.getElementsByTagName("ul")[0].childElementCount;
console.log(countItems);

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

Luaskan cuplikan

— Mo.
sumber

1

js murni

selected.children[0].children.length;

Tampilkan cuplikan kode

let num = selected.children[0].children.length;

console.log(num);

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

Luaskan cuplikan

— Kamil Kiełczewski
sumber