Jquery DIV count

Question

Hi Folks, 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.

My HTML structure is:

<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>

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).

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

Answer 1

Hi you should use the function 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

check the API

Answer 2

With the give HTML code, your code to count the elements is correct, and both ways should return two.

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:

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

If you want to count the first level of div elements 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:

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)));
});