使用jQuery计算重复列表中的元素

时间:2014-06-08 10:51:03

标签: javascript jquery repeat

我已经管理过要计算一个祖父母评论的总回复数。问题是我有重复标记,并希望计算并显示每个祖父母评论的回复。这是我所拥有的,也可以fiddle

<ol class="commentlist">
  <li class="comment byuser comment-author-admin even thread-even depth-1" id="li-comment-677">
    <div id="comment-677" class="grandparent">
        <div class="comment-inner">comment-677
            <div class="reply-info">                
                <div class="reply-has">has</div>
                <div class="reply-count"></div>
                <div class="reply-text">replies:</div>
            </div>
        </div>
        <ul class="children">
            <li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-678">
                <div id="comment-678" class="parent">
                    <div class="comment-inner">comment-678</div>
                    <ul class="children">
                        <li class="comment byuser comment-author-admin even depth-3" id="li-comment-680">
                            <div id="comment-680">
                                <div class="comment-inner">comment-680</div>
                            </div>
                        </li>
                        <li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-686">
                            <div id="comment-686">
                                <div class="comment-inner">comment-686</div>
                            </div>
                        </li>
                        <li class="comment byuser comment-author-admin even depth-3" id="li-comment-688">
                            <div id="comment-688">
                                <div class="comment-inner">comment-688</div>
                            </div>
                        </li>
                        <li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-689">
                            <div id="comment-689">
                                <div class="comment-inner">comment-689</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
  </li> 

  <li class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1" id="li-comment-679">
    <div id="comment-679" class="grandparent">
        <div class="comment-inner">comment-679
            <div class="reply-info">                
                <div class="reply-has">has</div>
                <div class="reply-count"></div>
                <div class="reply-text">replies:</div>
            </div>
        </div>
    <ul class="children">
            <li class="comment byuser comment-author-admin even depth-2" id="li-comment-682">
                <div id="comment-682" class="parent">
                  <div class="comment-inner">comment-682</div>
                </div>
            </li>
            <li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-690">
          <div id="comment-690" class="parent">
                  <div class="comment-inner">comment-690</div>
                </div>
            </li>
            <li class="comment byuser comment-author-admin even depth-3" id="li-comment-691">
                <div id="comment-691">
                  <div class="comment-inner">comment-691</div>
                </div>
            </li>
        </ul>
    </div>
  </li>         

</ol>

javascript:

var count = $("#li-comment-677 > .grandparent > .children > li").length

var count2 = $("#li-comment-677 > .grandparent > .children > .depth-2 > .parent > .children > li").length

var count3 = +count + +count2;

$('.reply-count').text(count3);

2 个答案:

答案 0 :(得分:2)

试试这个动态逻辑,

$(".grandparent").each(function(ind, val){
    var nTotalComment = $(val).find(".children .comment-inner").length;
    $(val).find(".reply-count").html(nTotalComment);
});

选中此jsfiddle

答案 1 :(得分:1)

您应该遍历该集合。您可以使用text回调函数,该函数对集合中的每个元素执行一次。 text方法在后台调用each方法,因此它也隐式迭代集合。

$('.commentlist .reply-count').text(function() {
    return $(this).closest('.comment-inner')
                  .next('.children')
                  .find('.comment')
                  .length;
});

http://jsfiddle.net/tzLz6/