jquery Slice function not working correctly

Question

I have some posts, each post has its own comments.

I use the slice function to only display 5 comments:

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

My html content that is in a for loop:

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

Each post should display its 5 comments, but only the first post shows them. Actually other posts can also display theirs if I set the slice parameter to a high value, like this:

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

but this way the first post shows all of its comments. As it seems this code is not runt relatively, but absolutely.

What is wrong? What is the solution ?

the css part:

.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;
}

You should run each parent through a forEach loop - so each div within each $(".comment_section_div") - the way you are doing it currently is en masse — StudioTime
– StudioTime, Commented Mar 13, 2017 at 14:01
$(".comment_section_div").children("div") returns all children div as a single 'array' which you are then slicing once. You'll need to do something like: $(".comment_section_div").each(function() { $(this).children("div").slice(0,5)...} — fdomn-m
– fdomn-m, Commented Mar 13, 2017 at 14:02
@Darren Sweeney write your answer so I could mark it (I actually found the solution just now). I used this and it works just fine: $('.comment_section_div').each(function(i, obj) { $(this).children("div").slice(0, 5).show(); }); — SMahdiS
– SMahdiS, Commented Mar 13, 2017 at 14:03

G0dsquad · Accepted Answer · 2017-03-13 14:06:11Z

2

One option instead of attempting to slice is using the lt:(index) selector. This will limit the selector to the top n for example .children("div:lt(5)").show();

Fiddle with a smaller subset:

https://jsfiddle.net/hth9jqjq/

edited Mar 13, 2017 at 14:06

answered Mar 13, 2017 at 14:02

G0dsquad

4,4652 gold badges19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StudioTime · Accepted Answer · 2017-03-13 14:14:52Z

1

As mentioned in the comments:

$(".comment_section_div").children("div").slice(0, 5).show(); is finding all the divs as children instead of each set of divs under each parent.

So, simply go through each parent then slice within the each loop:

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

answered Mar 13, 2017 at 14:14

StudioTime

24.3k40 gold badges129 silver badges217 bronze badges

Collectives™ on Stack Overflow

jquery Slice function not working correctly

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related