Question

我有一些帖子，每个帖子都有自己的评论。

我使用切片功能只显示5条评论：

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

我在for循环中的html内容：

<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>

每个帖子应该显示5条评论，但只有第一篇文章显示它们。实际上，如果我将slice参数设置为高值，其他帖子也可以显示他们的帖子，如下所示：

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

但这样第一篇文章就显示了它的所有评论。因为看起来这段代码并不是相对而言，而是绝对的。

有什么问题？解决方案是什么？

css部分：

.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

使用slice选择器而不是尝试lt:(index)的一个选项。这会将选择器限制在顶部 n ，例如.children("div:lt(5)").show();

摆弄一个较小的子集：

https://jsfiddle.net/hth9jqjq/

Answer 2

如评论中所述：

$(".comment_section_div").children("div").slice(0, 5).show();发现所有div都是子节点而不是每个父节点下的每组div。

因此，只需遍历每个父级，然后在每个循环中切片：

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

jquery切片功能无法正常工作

2 个答案: