Question

I have 16 elements of the class row

I’m trying to change the elements that are showing at one time by slicing.

$(document).ready(function() {
$('.row').slice(0, 2).show();
$('.row').slice(3, 16).hide();


$('#next').click(function() {
    $('.row').slice(0, 2).hide();
    $('.row').slice(3, 5).show();
    $('.row').slice(6, 15).hide();
});

});

So initially, you only see these three items:

Row 0
Row 1
Row 2
//$('.row').slice(0, 2).show(); -- this is correct

but then when I click my button to show the next three, instead this displays:

Row 2
Row 3
Row 4
//yet I specified this: $('.row').slice(3, 5).show();

Why does this happen and how could it be fixed?

Jfiddle: http://jsfiddle.net/RjHvw/

Answer 1

slice method is based on zero based index, Slice, even end parameter also is based on zero-based. the range extends up to but not including the specified index.

See demo in JsFiddle