Hitung elemen div anak langsung menggunakan jQuery

180

Saya memiliki struktur simpul HTML berikut:

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

Bagaimana cara menghitung jumlah anak langsung dari foo, yang bertipe div? Pada contoh di atas, hasilnya harus dua ( bardan baz).

javascript jquery dom jquery-selectors Dónal
sumber
1
Saya telah menambahkan tes jsperf untuk melihat perbedaan kecepatan antara pendekatan yang berbeda. lihat jawaban saya di bawah
manikanta

Jawaban:

345 
$("#foo > div").length

Arahkan anak-anak elemen dengan id 'foo' yang divs. Kemudian mengambil ukuran set terbungkus yang dihasilkan.

Garry Shutler
sumber
1
Saya hanya bertanya-tanya pada hari Jumat bagaimana cara menghitung kolom tabel dengan jQuery. Aku harus mencoba pendekatan yang sama: $('#table > th').size().
Jim Schubert
1
Kadang-kadang ini tidak berhasil dan Anda harus menggunakan $ ('# foo'). Children (). Size () yang lebih cepat menurut @mrCoder
472084
Jika saya ingin menggunakan ini daripada #foo lalu. Bagaimana cara menggunakan ini?
Mukesh
@ 472084 Jika kamu melakukannya dengan cara itu, itu akan menghitung elemen "span" juga. Perhatikan bagaimana pertanyaan menentukan dia ingin menghitung hanya elemen "div", tidak semua elemen.
Angel Blanco
68

Saya sarankan menggunakan $('#foo').children().size()untuk kinerja yang lebih baik.

Saya telah membuat tes jsperf untuk melihat perbedaan kecepatan dan children()metode yang mengalahkan pendekatan pemilih anak (#foo> div) oleh setidaknya 60% di Chrome (canary build v15) 20-30% di Firefox (v4).

Ngomong-ngomong, tak perlu dikatakan, kedua pendekatan ini menghasilkan hasil yang sama (dalam hal ini, 1000).

[Pembaruan] Saya telah memperbarui tes untuk menyertakan tes ukuran () vs panjang, dan mereka tidak membuat banyak perbedaan (hasil: lengthpenggunaan sedikit lebih cepat (2%) daripada size())

[Perbarui] Karena markup yang salah terlihat di OP (sebelum pembaruan 'markup divalidasi' oleh saya), keduanya $("#foo > div").length& $('#foo').children().lengthmenghasilkan hal yang sama ( jsfiddle ). Tetapi untuk jawaban yang benar untuk mendapatkan HANYA 'div' anak-anak, satu HARUS menggunakan pemilih anak untuk kinerja yang benar & lebih baik

manikanta
sumber
meskipun pertanyaan ini ditanyakan kapan-kapan, hanya ingin berbagi sehingga ini bisa membantu seseorang mulai sekarang
manikanta
Di mana menyaring hanya anak-anak 'div' di sana?
Andrey Tserkus
2
.lengthsebenarnya metode yang disukai karena tidak memiliki overhead panggilan fungsi.
Nic Aitch
Ya, pemilih anak benar karena menggunakan pemilih CSS asli, jadi pilihannya ditulis dalam C ++ daripada JavaScript ... Cukup perbedaan kinerja. Jawaban ini lebih mudah dimengerti tetapi jauh lebih lambat.
mdenton8
@manikanta Hai, anser sangat detail. Maaf mengganggu, satu pertanyaan. Jika saya suka $('#extraLinks').children().size()menghitung kotak teks dalam div (bernama extraLinks) mengapa saya dapatkan 4ketika mereka hanya 2. Secara umum, saya mendapatkan panjangnya dikalikan dengan 2 ... Ada yang tahu kenapa? Terima kasih
slevin
25 
$("#foo > div")

memilih semua divs yang merupakan keturunan langsung dari #foo
setelah Anda memiliki anak-anak, Anda dapat menggunakan fungsi ukuran:

$("#foo > div").size()

atau bisa kamu gunakan 

$("#foo > div").length

Keduanya akan mengembalikan hasil yang sama kepada Anda

Darko Z
sumber
17 
$('#foo').children('div').length
Abdennour TOUMI
sumber
8

Menanggapi jawaban mrCoders menggunakan jsperf mengapa tidak menggunakan dom node?

var $foo = $('#foo');
var count = $foo[0].childElementCount

Anda dapat mencoba tes di sini: http://jsperf.com/jquery-child-ele-size/7

Metode ini mendapat 46.095 op / s sedangkan metode lain terbaik 2000 op / s

HaxElit
sumber
2
OP hanya meminta elemen div anak
dj18
6 
$('#foo > div').size()
alat
sumber
5 
$("#foo > div").length

jQuery memiliki fungsi .size () yang akan mengembalikan berapa kali elemen muncul tetapi, seperti yang ditentukan dalam dokumentasi jQuery, itu lebih lambat dan mengembalikan nilai yang sama dengan properti .length sehingga yang terbaik adalah cukup menggunakan. properti panjang. Dari sini: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

zholdas
sumber
5 
var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>
John Alvarez
sumber
3

Dengan versi jquery terbaru, Anda dapat menggunakan $("#superpics div").children().length.

Kent Thomas
sumber
2 
var n_numTabs = $("#superpics div").size();

atau

var n_numTabs = $("#superpics div").length;

Seperti yang sudah dikatakan, keduanya mengembalikan hasil yang sama.
Tetapi fungsi size () lebih jQuery "PC".
Saya memiliki masalah yang sama dengan halaman saya.
Untuk saat ini, abaikan saja> dan itu akan berfungsi dengan baik.

Andrew Perkins
sumber
Selector Descendant akan mengembalikan semua keturunan #superpics, termasuk anak, cucu, cicit, dan sebagainya, dari elemen itu, bukan hanya anak
manikanta
lebih banyak jQuery "PC". artinya?
Ghanshyam Lakhani
1 
$("div", "#superpics").size();
Alexandros Ioannou
sumber
1
Itu termasuk semua div keturunan, bukan hanya anak-anak.
Felix Kling
-1

Coba ini untuk elemen anak langsung dari tipe div

$("#foo > div")[0].children.length
bakat makhanya
sumber