jQueryJavaScript - Counting child elements in multiple parent elements - Stack Overflow

admin管理员组

文章数量:1391925

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

Share Improve this question Follow edited May 30, 2013 at 11:52 SomeShinyObject 7,83166 gold badges4040 silver badges6060 bronze badges asked May 30, 2013 at 11:50 AJTAJT 26622 gold badges88 silver badges3333 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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

本文标签： jQueryJavaScriptCounting child elements in multiple parent elementsStack Overflow