Hitung elemen div anak langsung menggunakan jQuery

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

$("#foo > div").length

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

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

$("#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

$('#foo').children('div').length

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

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

$("#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/

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>

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

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.

$("div", "#superpics").size();

Coba ini untuk elemen anak langsung dari tipe div

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