I'm creating a directory of apps, each of which has it's own ments which are hidden until the user opens them. I'd like to show the number of ments that each app currently contains but I can only get it display the total number of ments on the page (See JSFiddle: / for a basic example). Ideally it should display 2 in the top box and 4 in the bottom box. I thought I might need to use an array or something along those lines?

Here is my code:

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

jQuery

$(".parent").each(function(index){
    var numChilds = $(".child").length;
    $(".parent").append(numChilds);
});

I'm creating a directory of apps, each of which has it's own ments which are hidden until the user opens them. I'd like to show the number of ments that each app currently contains but I can only get it display the total number of ments on the page (See JSFiddle: http://jsfiddle/9M4nw/2/ for a basic example). Ideally it should display 2 in the top box and 4 in the bottom box. I thought I might need to use an array or something along those lines?

Here is my code:

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

jQuery

$(".parent").each(function(index){
    var numChilds = $(".child").length;
    $(".parent").append(numChilds);
});

• javascript
• jquery
• html

4 Answers 4

You have to select the current HTML element (with class parent). Then, you will use it in selecting the length of elements with class .child and the html for .counter.

Using $(this) you can select the current HTML element from each() function. Corrected code:

$(".parent").each(function(){
    var numChilds = $(".child", $(this)).length;
    $(".counter", $(this)).html(numChilds);
});

JSFIDDLE

The problem is you need to limit the scope of the element look up to the desired parent element

$(".parent").each(function(index){
    var numChilds = $(".child", this).length;
    $(".counter", this).html(numChilds);
});

Another version

$(".parent").each(function(index){
    var $this = $(this);
    var numChilds = $this.find(".child").length;
    $this.find(".counter").html(numChilds);
});

Demo: Fiddle

This would require some extra work to show the number of childs in a more elegan way, but it should be enough to understand the idea

$(".parent").each(function(index){
    var $this = $(this);
    var numChilds = $this.find(".child").length;
    $this.append("<span>" + numChilds + "</span>");
});

This code will help you to get number of children separately for each parent div :-

  $(document).ready(function () {   
                      $(".parent").each(function (i)  {  
                                $(this).children().length;
                            });
                      });

Try this hope this may help you.Vote