jQuery/JavaScript - подсчет дочерних элементов в нескольких родительских элементах

Question

Я создаю каталог приложений, каждый из которых имеет свои собственные комментарии, которые скрыты, пока пользователь не откроет их. Я хотел бы показать количество комментариев, которые каждое приложение содержит в настоящее время, но я могу получить только общее количество комментариев на странице (см. JSFiddle: http://jsfiddle.net/9M4nw/2/ для базового примера). В идеале он должен отображать 2 в верхней коробке и 4 в нижнем поле. Я думал, что мне может понадобиться использовать массив или что-то в этом роде?

Вот мой код:

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

Answer 1

Вы должны выбрать текущий HTML-элемент (с классом parent). Затем вы будете использовать его при выборе длины элементов с классом .child и html для .counter.

Используя $(this), вы можете выбрать текущий элемент HTML из each(). Исправленный код:

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

JSFIDDLE

Answer 2

Проблема заключается в том что вам нужно ограничить СБН ОПЕ элемента смотреть до желаемого parent элемента

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

Другая версия

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

Демо: Fiddle

Answer 3

Это потребует некоторую дополнительную работу, чтобы показать количество Чайлдс в более elegan но этого должно быть достаточно, чтобы понять идею

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

Answer 4

Этот код поможет вам получить число детей отдельно для каждого родительского DIV: -

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

Попробуйте надеюсь, что это может помочь you.Vote