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

Question

我已经设法统计了一个祖 parent 评论的回复总数。问题是我有重复标记，想计算并显示每个祖 parent 评论的回复。这是我拥有的，也可以作为 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);

Answer 1

试试这个动态逻辑，

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

检查这个jsfiddle