jQuery 显示前两个回复，隐藏其余回复答案

【问题标题】：jQuery show first two replies, hide the restjQuery 显示前两个回复，隐藏其余回复
【发布时间】：2014-06-09 20:17:00
【问题描述】：

cmets 的螺纹深度为三层。祖父母（深度 1）cmets 全部显示。我想向每个祖父母评论显示前两个深度 2 回复（父类评论），并让其余部分被隐藏并使用切换按钮显示（理想情况下，一个在“隐藏”和“显示”之间更改文本的按钮）。除非只有一个深度 2 回复，否则应隐藏深度 3 回复，如果可能，应显示第一个深度 3 回复，以便在所有场景中总共显示两个回复。

我已成功切换 fiddle 中的所有深度 3 回复

这里是标记和 javascript（更新）：

<div id="comments">
  <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>
        <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>
        <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>
                <ul class="children">
                   <li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-690">
                      <div id="comment-690">
                          <div class="comment-inner">comment-690</div>
                      </div>
                   </li>
                </ul>
               </div>
            </li>

            <li class="comment byuser comment-author-admin even depth-2" id="li-comment-691">
                <div id="comment-691" class="parent">
                  <div class="comment-inner">comment-691</div>
                </div>
            </li>
        </ul>
      </div>
    </li>           

   <ol>
</div>

【问题讨论】：

$('#toggle-all').click(function() { 那家伙要做什么？

标签： javascript jquery toggle

【解决方案1】：

您将执行与第三级基本相同的操作，但使用gt()（从零开始）选择器跳过前两个回复：

http://jsfiddle.net/isherwood/Frpmj/3

$(this).next('ul').find('li:gt(1)').slideToggle();

http://api.jquery.com/gt-selector/

【讨论】：