Jquery DIV计数

Question

我正在尝试计算父母下的元素数量，但它给了我一个不正确的数量。结果应该是2，其中返回我4.

我的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>&nbsp;</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">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="serial" width="110"></td>
                <td class="serial" width="322"></td>
              </tr>
            </tbody>
          </table></td>
      </tr>
    </tbody>
  </table>
</div>

我用来计算的代码是：

var numofDivs = $("#parentDiv div").size();
alert(numofDivs);

如果我使用以下代码，则结果为1（这也是错误的）。

var numofDivs = $("#parentDiv > div").size();
alert(numofDivs);

Answer 1

您好，您应该使用函数children（）

$("#parentDiv").children("div").length

这个函数给你一个数组，你可以得到10个数组。

在儿童功能中，您可以指定要过滤的标签，但您也可以将其留空，它会为您提供所有儿童

check the API

Answer 2

使用HTML代码，您的代码计算元素是正确的，两种方式都应该返回两个。

因此，结论是HTML代码实际上并不像您描述的那样。例如，给出该结果的结构可能如下所示：

<div id="parentDiv">
  <div>
    <div></div>
    <div></div>
  </div>
  <p>
    <div>
    </div>
  </p>
</div>

如果要计算遇到的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)));
});