jQuery slice() method

The jQuery slice() method selects a subset (part of a larger set) of matched elements based on the range of indices. This method limits the elements selection in the group.

It returns the elements between the start index and end index value. The index starts with 0. If we do not specify the end index, the method will start from the start index and will select every matched element until the last matched element is selected.

Syntax

This method accepts two parameters in which the first is mandatory, and another one is optional. The parameter values are defined as follows -

start: It is a mandatory parameter. It is an integer that represents the index value from where the select the elements. The index starts with 0. Negative values are allowed. Using the negative value will begin the selection from the end of matched elements.

stop: It is an optional parameter. It is an integer that represents the index value up to which the elements get selected. If it is omitted, the selection will continue to the end of the set.

Now, let's see some simple examples of using the jQuery slice() method.

Example1

In this example, there are several paragraph elements. The paragraph starts with the index value 0. Here, we are using both parameters of the slice() method with starting value 1 and stop value is 4 to select the paragraphs in the specified range. The method will select the paragraph elements to start from the index value 1, and the selection will continue to the endpoint.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>

<body>
<h3> It is an example of using the jQuery slice() method. </h3>
<p> Paragraph with index = 0 </p>
<p> Paragraph with index = 1 </p>
<p> Paragraph with index = 2 </p>
<p> Paragraph with index = 3 </p>
<p> Paragraph with index = 4 </p>
<p> Paragraph with index = 5 </p>
<span> Click the following button to see the effect. </span> </br> </br>
<button> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
  $("p").slice(1, 4).css({"background-color": "yellow", "color": "red"});
  });
});
</script>
</body>
</html>

Test it Now

Output

After clicking the given button, the elements in the specified range will get selected as shown in the below screenshot -

Example2

Here, we are using the negative values of both parameters of the slice() method with starting value -4, and stop value is -1 to select the paragraphs in the specified range.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>

<body>
<h3> It is an example of using the jQuery slice() method. </h3>
<p> Paragraph with index = 0 (negative index = -6) </p>
<p> Paragraph with index = 1 (negative index = -5) </p>
<p> Paragraph with index = 2 (negative index = -4) </p>
<p> Paragraph with index = 3 (negative index = -3) </p>
<p> Paragraph with index = 4 (negative index = -2) </p>
<p> Paragraph with index = 5 (negative index = -1) </p>
<span> Click the following button to see the effect. </span> </br> </br>
<button> Click me </button>
<script>
$(document).ready(function(){
$("button").click(function() {
  $("p").slice(-4, -1).css({"background-color": "yellow", "color": "red"});
  });
});
</script>
</body>
</html>

Test it Now

Output