javascript Jquery DIV 计数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3892281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery DIV count
提问by t0mcat
I am trying to count the number of elements under a parent but its giving me an incorrect count. The result should be 2, where as its returning me 4.
我正在尝试计算父项下的元素数，但它给了我不正确的计数。结果应该是 2，因为它返回了我 4。
My HTML structure is:
我的 HTML 结构是：
<div style="overflow: hidden;" id="parentDiv" class="scroll">
<div id="3">
<table id="t3" class="Table">
<tbody>
<tr>
<td id="b3" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code3" width="172"></td>
<td class="Num" id="Num3" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"></td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<div id="4" >
<table id="t4" class="Table">
<tbody>
<tr>
<td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code4" width="172"></td>
<td class="Num" id="Num4" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"> </td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
and the code I am using to count is:
我用来计数的代码是：
var numofDivs = $("#parentDiv div").size();
alert(numofDivs);
and if I am using the following code, the result is coming 1 (which is incorrect too).
如果我使用以下代码，结果是 1（这也是不正确的）。
var numofDivs = $("#parentDiv > div").size();
alert(numofDivs);
回答by mklfarha
Hi you should use the function children()
嗨，你应该使用函数 children()
$("#parentDiv").children("div").length
the function gives you an array and ten you can get the length.
该函数为您提供一个数组，十个您可以获得长度。
and in the children function you can specify what tags to filter, but you can also leave it blank and it will give you all the children
在子函数中，您可以指定要过滤的标签，但您也可以将其留空，它将为您提供所有子项
回答by Guffa
With the give HTML code, your code to count the elements is correct, and both ways should return two.
使用给定的 HTML 代码，您计算元素的代码是正确的，两种方式都应该返回两个。
So, the conclusion is that the HTML code doesn't actually look the way that you describe it. A structure that would give that result could for example look like this:
因此，结论是 HTML 代码实际上并不像您描述的那样。例如，给出该结果的结构可能如下所示：
<div id="parentDiv">
<div>
<div></div>
<div></div>
</div>
<p>
<div>
</div>
</p>
</div>
If you want to count the first level of divelements that you encounter, you would have to do it recursively, i.e. for each child element check if it's a div element or count the number of first level div elements it contains:
如果要计算div遇到的第一级元素，则必须递归执行，即检查每个子元素是否为 div 元素或计算它包含的第一级 div 元素的数量：
function countDivs(element) {
var cnt = 0;
$(element).children().each(function(){
cnt += this.tagName === 'DIV' ? 1 : countDivs(this);
})
return cnt;
}
$(function(){
alert(countDivs($('#parentDiv').get(0)));
});
