Đếm các phần tử div con ngay lập tức bằng cách sử dụng jQuery

Tôi có cấu trúc nút HTML sau:

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

Làm thế nào để tôi đếm số lượng trẻ em ngay lập tức foo, đó là loại div? Trong ví dụ trên, kết quả phải là hai ( barvà baz).

$("#foo > div").length

Con trực tiếp của phần tử với id 'foo' là div. Sau đó lấy kích thước của bộ bọc được sản xuất.

Tôi khuyên bạn nên sử dụng $('#foo').children().size() để có hiệu suất tốt hơn.

Tôi đã tạo một thử nghiệm jsperf để xem sự khác biệt về tốc độ và children()phương pháp đánh bại cách tiếp cận bộ chọn con (#foo> div) ít nhất 60% trong Chrome (canary build v15) 20-30% trong Firefox (v4).

Nhân tiện, không cần phải nói, hai cách tiếp cận này tạo ra kết quả giống nhau (trong trường hợp này là 1000).

[Cập nhật] Tôi đã cập nhật thử nghiệm để bao gồm kích thước () so với thử nghiệm độ dài và chúng không tạo ra nhiều khác biệt (kết quả: lengthviệc sử dụng nhanh hơn một chút (2%) so với size())

[Cập nhật] Do đánh dấu không chính xác được thấy trong OP (trước khi tôi cập nhật 'đánh dấu xác thực'), cả hai $("#foo > div").length& đều cho $('#foo').children().lengthkết quả giống nhau ( jsfiddle ). Nhưng để có câu trả lời đúng để chỉ có con 'div', người ta NÊN sử dụng bộ chọn con để có hiệu suất chính xác & tốt hơn

$("#foo > div") 

chọn tất cả các div là hậu duệ ngay lập tức của #foo
khi bạn có tập hợp con bạn có thể sử dụng hàm kích thước:

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

hoặc bạn có thể sử dụng

$("#foo > div").length

Cả hai sẽ trả lại cho bạn cùng một kết quả

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

Đáp lại câu trả lời của mrCoders bằng jsperf tại sao không sử dụng nút dom?

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

Bạn có thể thử bài kiểm tra tại đây: http://jsperf.com/jquery-child-ele-size/7

Phương pháp này nhận được 46.095 op / s trong khi các phương thức khác tốt nhất là 2000 op / s

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

$("#foo > div").length

jQuery có hàm .size () sẽ trả về số lần phần tử xuất hiện nhưng, như được chỉ định trong tài liệu jQuery, nó chậm hơn và trả về cùng giá trị như thuộc tính .length, vì vậy tốt nhất là chỉ nên sử dụng. chiều dài tài sản. Từ đây: 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>

Với phiên bản mới nhất của jquery, bạn có thể sử dụng $("#superpics div").children().length.

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

hoặc là

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

Như đã nói, cả hai đều trả lại kết quả như nhau.
Nhưng hàm size () là jQuery "PC" hơn.
Tôi đã có một vấn đề tương tự với trang của tôi.
Bây giờ, chỉ cần bỏ qua> và nó sẽ hoạt động tốt.

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

Hãy thử điều này cho các phần tử con ngay lập tức của loại div

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