Đếm số lượng phần tử trong div

Question

Tôi có một div có khoảng cách bên trong nó. Có cách nào đếm được bao nhiêu phần tử trong div sau đó đưa nó ra như một giá trị. Ví dụ có 5 khoảng trong một div sau đó nó sẽ đếm nó và cảnh báo năm. Trong Javascript xin vui lòng.

Cảm ơn bạn.

Answer 1

Bạn có thể sử dụng chức năng này, nó sẽ tránh tính các nút văn bản. Bạn có thể chọn đếm số trẻ em của trẻ em (tức làrecursive)

function getCount(parent, getChildrensChildren){ 
    var relevantChildren = 0; 
    var children = parent.childNodes.length; 
    for(var i=0; i < children; i++){ 
     if(parent.childNodes[i].nodeType != 3){ 
      if(getChildrensChildren) 
       relevantChildren += getCount(parent.childNodes[i],true); 
      relevantChildren++; 
     } 
    } 
    return relevantChildren; 
} 

Cách sử dụng:

var element = document.getElementById("someElement"); 
alert(getCount(element, false)); // Simply one level 
alert(getCount(element, true)); // Get all child node count 

Hãy thử nó ra ở đây: JS Fiddle

Answer 2

Với jQuery bạn có thể làm như thế này:

var count = $('div').children().length; 
alert(count);​​​ 

Dưới đây là một Fiddle: http://jsfiddle.net/dryYq/1/

Answer 3

Without jQuery:

var element = document.getElementById("theElementId"); 
var numberOfChildren = element.children.length 

Với jQuery:

var $element = $(cssSelectocr); 
var numberOfChildren = $element.children().length; 

Cả hai th chỉ trả lại trẻ em ngay lập tức.

Answer 4

Với jQuery; kiểm tra chỉ cho nhịp bên trong một div:

JSFiddle

$(function(){ 
    var numberOfSpans = $('#myDiv').children('span').length; 
    alert(numberOfSpans); 
})();​ 

Answer 5

Nếu bạn muốn số lượng con cháu, bạn có thể sử dụng

var element = document.getElementById("theElementId"); 
var numberOfChildren = element.getElementsByTagName('*').length 

Nhưng nếu bạn muốn số lượng trẻ em ngay lập tức, sử dụng

element.childElementCount 

Xem hỗ trợ trình duyệt tại đây: http://help.dottoro.com/ljsfamht.php

hoặc

element.children.length 

Xem hỗ trợ trình duyệt ở đây: https://developer.mozilla.org/en-US/docs/DOM/Element.children#Browser_compatibility

Answer 6

Để đếm tất cả các yếu tố hậu duệ bao gồm các yếu tố lồng nhau trong javascript đơn giản, có một số lựa chọn:

Cách đơn giản nhất có lẽ là đây:

var count = parentElement.getElementsByTagName("*").length; 

Nếu bạn muốn tự do quảng cáo d sự kiện khác luận xung quanh những gì bạn đếm, bạn có thể recurse qua cây địa phương như thế này:

function countDescendantElements(parent) { 
    var node = parent.firstChild, cnt = 0; 
    while (node) { 
     if (node.nodeType === 1) { 
      cnt++; 
      cnt += countDescendantElements(node); 
     } 
     node = node.nextSibling; 
    } 
    return(cnt); 
} 

Working Demo: http://jsfiddle.net/jfriend00/kD73F/

Nếu bạn chỉ muốn đếm con trực tiếp (mức không sâu) và chỉ muốn đếm các nút phần tử (không phải nút văn bản hoặc nhận xét) và muốn hỗ trợ trình duyệt rộng, bạn có thể thực hiện việc này:

function countChildElements(parent) { 
    var children = parent.childNodes, cnt = 0; 
    for (var i = 0, len = children.length; i < len; i++) { 
     if (children[i].nodeType === 1) { 
      ++cnt; 
     } 
    } 
    return(cnt); 
}