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 ing 1 (which is incorrect too).

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

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 ing 1 (which is incorrect too).

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

• javascript
• jquery

• 3 I'm confused by your question - both of your solutions give the correct number of divs underneath parentDiv. Here is my example in jsFiddle - jsfiddle/ZNBXz – JasCav Commented Oct 8, 2010 at 16:03
• Seems to work fine to me. jsfiddle/F66xA Alert says 2 – Adam Commented Oct 8, 2010 at 16:06
• 1 I find your code works fine too - perhaps you have another element with the id of parentDiv? – Deebster Commented Oct 8, 2010 at 16:06
• Folks, this is the HTML I am working on: – t0mcat Commented Oct 8, 2010 at 16:17
• re: folks -- then your HTML isn't valid, your #parentDiv tag is never closed :P – Jason Slob Commented Oct 8, 2010 at 16:23

2 Answers 2

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

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