jQuery .slice() reduces the set of matched elements to a subset specified by a range of indices
Syntax and Description
.slice(start[, end])
reduces the set of matched elements to a subset specified by a range of indices.
startis an integer indicating the 0-based position after which the elements are selectedend (optional)is an integer indicating the 0-based position before which the elements stop being selected; if omitted, the range continues until the end of the set.
Its return value is the new jQuery object.
Consider a page with a simple list as follows:
<ul>/*w w w.j a v a 2s .c o m*/
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
We can apply this method to the set of list items as follows:
$('li').slice(2).css('background-color', 'red');
items 3, 4, and 5 turns red.
index is 0-based, and refers to the position of elements within the jQuery object; not within the DOM tree.
The end parameter allows us to limit the selected range even further. For example:
$('li').slice(2, 4).css('background-color', 'red');
items 3 and 4 are selected.
The index is once again 0-based. The range extends up to, but doesn't include, the specified index.
If a negative number is provided, this indicates a position starting from the end of the set, rather than the beginning. For example:
$('li').slice(-2, -1).css('background-color', 'red');
item 4 turns red, as it is the only item in the range between the second from the end (-2) and the first from the end (-1).
Slice from start to middle
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww . j av a 2 s. c o m-->
function colorEm() {
var $div = $("div");
$div.css("background", "red");
$div.slice(2, 4).css("background", "yellow");
}
$("button").click(colorEm);
});
</script>
<style>
div { width:40px; height:40px; margin:10px; float:left;}
</style>
</head>
<body>
<body>
<button>Click the button</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div>java2s.com</div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Slice from start to the end
The following code only specifies one value to the slice method and it will slice from the second till ends.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww.j a v a2s .c om-->
function colorEm() {
var $div = $("div");
$div.css("background", "red");
$div.slice(2).css("background", "yellow");
}
$("button").click(colorEm);
});
</script>
<style>
div { width:40px; height:40px; margin:10px; float:left;}
</style>
</head>
<body>
<body>
<button>Click the button</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div>java2s.com</div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Slice a UL list
The following code selects li elements and only adds class for some of them.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
var tmpExample = {
ready : function() {<!--from w w w.ja v a 2s . co m-->
$('ul#uiID li').slice(0, 4).addClass('justAdd');
}
};
$(document).ready(tmpExample.ready);
</script>
<style type='text/css'>
ul#uiID {
list-style: none;
margin: 0;
padding: 0;
}
ul#uiID li {
margin: 1px;
padding: 3px;
}
li.justAdd {
background: #fcc16e;
}
</style>
</head>
<body id='tmpExample'>
<ul id='uiID'>
<li class='liClass1'>A</li>
<li class='liClass1'>B</li>
<li class='liClass1'>C</li>
<li class='liClass1'>D</li>
<li class='liClass2'>E</li>
<li class='liClass2'>F</li>
<li class='liClass2'>G</li>
<li class='liClass2'>H</li>
<li class='liClass3'>I</li>
<li class='liClass3'>J</li>
</ul>
</body>
</html>