在JavaScript中計算嵌套的div

Question

嘿我需要用給定的類名來計算嵌套的div。 例如：

<div id = "divA">
    <div class = "anotherName"></div>
    <div class = "toBeCounted"></div>
    <div class = "someName"></div>
    <div class = "toBeCounted"></div>
    <div class = "toBeCounted"></div>
    <div class = ""></div>
</div>
<div id = "divB">
    <div class = ""></div>
    <div class = "toBeCounted"></div>
    <div class = ""></div>
    <div class = "toBeCounted"></div>
</div>

因此，如果我想計算“toBeCounted”，我將獲得3為divA和2為divB。

Answer 1

您可以使用.querySelectorAll()並檢查結果的長度：

var divAcount = document.querySelectorAll("#divA > .toBeCounted").length;

該>關系堅持認為， .toBeCounted元素的直接子divA 。 如果這不是你想要的， 任何 toBeCounted內格divA應該算，你只是離開了> 。

Answer 2

使用Jquery，可以通過使用輕松實現

var countA = $("#divA .toBeCounted").length;
var countB = $("#divB .toBeCounted").length;

Answer 3

試試這個純粹的JavaScript代碼

var countinDivA = document.getElementById("divA").getElementsByClassName("toBeCounted").length;
var countinDivB = document.getElementById("divB").getElementsByClassName("toBeCounted").length;

Answer 4

如果您提前不知道父母的身份，這可能證明是有用的：

var parents = [],
    counted = document.getElementsByClassName("toBeCounted");

for (var i=0; i < counted.length; i++ ) { 
    var id = counted[i].parentNode.id;
    if ( !parents[id] ) parents[id] = 1
    else parents[id]++;
}

---

[ divA: 3, divB: 2 ]