jQuery/JS - Count elements within element

Question

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

All I'm doing different is using [body onload="countPages()"] — TheCarver
– 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
– TheCarver, Commented Dec 22, 2011 at 1:12
maybe you have somewhere on your page a second element with id=cont ? — Zoltan Toth
– Zoltan Toth, Commented Dec 22, 2011 at 1:14

Jake Feasel · Accepted Answer · 2011-12-22 01:03:41Z

5

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

answered Dec 22, 2011 at 1:03

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Interrobang Over a year ago

@ŠimeVidas: you are incorrect. If an #id is the first part of a selector, Jake's way is the fastest. Ref: stackoverflow.com/questions/2421782/…

Šime Vidas Over a year ago

@Interrobang That accepted answer in that thread shows that adding context improves performance. However, there is no mention of a #foo div selector in that question...

Interrobang Over a year ago

The accepted answer says that adding context improves performance except in the case of ID selectors, and a JSPerf link is provided in the thread as well.

Diode · Accepted Answer · 2011-12-22 02:24:49Z

3

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

answered Dec 22, 2011 at 2:24

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Comments

Bassam Mehanni · Accepted Answer · 2011-12-22 01:54:49Z

1

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 completed loading.

edited Dec 22, 2011 at 1:54

answered Dec 22, 2011 at 1:07

Bassam Mehanni

14.9k2 gold badges35 silver badges41 bronze badges

Comments

Adrian · Accepted Answer · 2015-06-03 19:34:57Z

-1

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

answered Jun 3, 2015 at 19:34

Adrian

234 bronze badges

Collectives™ on Stack Overflow

jQuery/JS - Count elements within element

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related