In jQuery or JS I need to count the amount of DIV elements inside my parent DIV called cont? I've seen similar questions here on StackOverflow and have tried the following.

<div class="b-load" id="cont">
    <div>
    <img src="page2.jpg" alt=""/>
    </div>
    <div>
    <img src="page3.jpg" alt="" />
    </div>
    <div>
    <img src="page4.jpg" alt="" />
    </div>
    <div>
    <img src="page5.jpg" alt="" />
    </div>
</div>

function countPages() {
    var maindiv = document.getElementById('cont');
    var count = maindiv.getElementsByTagName('div').length;
    alert(count);
}

The child DIV's are dynamically produced, so I need to count them after the page has finished loading. The problem I have is the function I wrote counts 13 DIV's and in this example, there should only 4!! Any help gratefully received..

In jQuery or JS I need to count the amount of DIV elements inside my parent DIV called cont? I've seen similar questions here on StackOverflow and have tried the following.

<div class="b-load" id="cont">
    <div>
    <img src="page2.jpg" alt=""/>
    </div>
    <div>
    <img src="page3.jpg" alt="" />
    </div>
    <div>
    <img src="page4.jpg" alt="" />
    </div>
    <div>
    <img src="page5.jpg" alt="" />
    </div>
</div>

function countPages() {
    var maindiv = document.getElementById('cont');
    var count = maindiv.getElementsByTagName('div').length;
    alert(count);
}

The child DIV's are dynamically produced, so I need to count them after the page has finished loading. The problem I have is the function I wrote counts 13 DIV's and in this example, there should only 4!! Any help gratefully received..

• javascript
• jquery

Share Improve this question Follow asked Dec 22, 2011 at 1:01 TheCarverTheCarver 19.7k2727 gold badges103103 silver badges153153 bronze badges 4

• 3 it shows 4 correctly - jsfiddle/QSurJ – Zoltan Toth Commented Dec 22, 2011 at 1:03
• All I'm doing different is using [body onload="countPages()"] – TheCarver Commented Dec 22, 2011 at 1:07
• I just changed getElementsByTagName('div') to getElementsByTagName('img') and I get the correct number but I'm still shocked that I get a different number than the fiddle example!! – TheCarver Commented Dec 22, 2011 at 1:12
• maybe you have somewhere on your page a second element with id=cont ? – Zoltan Toth Commented Dec 22, 2011 at 1:14

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

console.log($("#cont div").length);

var maindiv = document.getElementById('cont');
var count = maindiv.children.length;
alert(count);

Try this

$(function(){
   var mainDiv = $('#cont');
   var childDivCount = mainDiv.find('div').length;
   });

By the way, this is jQuery's syntax (one of them anyways) for document ready. This will only fire after your page has pleted loading.

No need to use jQuery here. If you only need to know the amount of childElements, you can use node.childElementCount