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的元素长度和.counter的html。

使用$(this)，您可以从each()功能中选择当前的HTML元素。更正后的代码：

$(".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

这需要一些额外的工作来以更加优雅的方式显示孩子的数量，但它应该足以理解这个想法

$(".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;
                            });
                      });

试试这个希望，这可能对你有帮助。投票

jQuery / JavaScript - 计算多个父元素中的子元素

4 个答案: