jqueryスライス機能が正しく動作しない

Question

私はいくつかの投稿を持っていますが、それぞれの投稿には独自のコメントがあります。

私だけの表示に5件のコメントスライス機能を使用し

：各ポストはその5件のコメントを表示するが、唯一すべき

<div class='comment_section_div' answer_index = "{{forloop.counter}}" pk = "{{ answer.pk }}" style="margin: 10px 0px; padding-right:10px;"> 
     <div style="font-size: 12px; color: #737373; margin-top: 15px; direction: rtl;"> 
      <div id = "comment_txt" style="display: inline;"> 
       {{ comment.comment }} 
      </div> 
      <div style="display: inline;"> 
       by - 
       <a href="#" onclick="return false;"> 
        {{ comment.user|find_username }} 
       </a> 
       in - 
       {{ comment.timestamp|pretty_date }} 
      </div> 
     </div> 
</div> 

：ループの中で私のHTMLコンテンツ

$(".comment_section_div").children("div").slice(0, 5).show(); 

を最初の記事はそれらを示しています。実は私が高い値にスライスパラメータを設定した場合の他の記事も、このように、彼らを表示することができます。

$(".comment_section_div").children("div").slice(0, 50).show(); 

しかし、この方法は、最初の記事は、そのコメントのすべてを示しています。このコードは相対的に実行されているわけではありませんが、絶対に実行されているようです。

どうしたのですか？解決策は何ですか？

CSSの一部：代わりにlt:(index)セレクタを使用しているsliceにしようとの

.comment_section_div > div{ 
    display:none; 
    padding: 10px; 
    border-width: 0 1px 1px 0; 
    border-style: solid; 
    border-color: #fff; 
    box-shadow: 0 1px 1px #ccc; 
    margin-bottom: 5px; 
    background-color: #f1f1f1; 
} 

Answer 1

：

$(".comment_section_div").children("div").slice(0, 5).show();は、全てのdivを発見され、これは、例えば上部Nに小さいサブセットと.children("div:lt(5)").show();

フィドルをセレクタを制限します各親の下にあるdivの各セットではなく、 `（「comment_section_div。」）各` $内ので、各 `div` - あなたは、foreachループを介して親を実行する必要があります

$('.comment_section_div').each(function() { 
    $(this).children('div').slice(0, 5).show(); 
}); 

Answer 2

一つの選択肢。コメント欄で述べたように

https://jsfiddle.net/hth9jqjq/