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

Question

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

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

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

Answer 1

$("#foo > div").length 

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

Answer 2

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

Answer 3

$("#foo > div") 

chọn tất cả các div đó là hậu duệ trực tiếp của #foo
một khi bạn có các thiết lập của con bạn có thể sử dụng chức năng 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 kết quả tương tự

Answer 4

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

hay

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

---

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

Answer 5

$("#foo > div").length 

jQuery có một chức năng .size() sẽ trả về số lần mà một yếu tố xuất hiện nhưng, như quy định trong tài liệu hướng dẫn jQuery, nó là chậm hơn và trả về giá trị tương tự như tài sản .length nên nó tốt nhất là chỉ cần sử dụng thuộc tính .length. Từ đây: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 6

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

Answer 7

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

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

Bằng cách này, không cần phải nói, hai cách tiếp cận này cho 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 các bài kiểm tra bao gồm các kích thước() vs kiểm tra chiều dài, và họ không làm cho nhiều sự khác biệt (kết quả: length sử dụng là hơi nhanh hơn (2%) so với size())

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

Answer 8

Để đối phó với mrCoders câu trả lời như jsperf tại sao không chỉ cần sử dụng nút dom?

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

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

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

Answer 9

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

Answer 10

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> 

Answer 11

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