jQuery slice() Method

The slice() method in jQuery is used to select a subset of elements from a set of matched elements. The subset is a portion of the matched set.

This method accepts two parameters: the "start" index, which is the starting index beginning from 0, and the "end" index, which is the ending index. These parameters are used to select a range of elements.

Syntax

Following is the syntax of jQuery slice() method −

$(selector).slice(start,stop)

Parameters

This method accepts the following parameters −

start: The index at which to start the selection of elements. The index numbers start at 0.
stop: The index at which to end the selection. If this parameter is not provided, the selection continues until the end of the set. The index numbers start at 0.

If we provide a negative value to any of the above parameters, It will select elements from the end of the selected elements, instead of the beginning.

Example 1

In the following example, we are passing a positive value to "start" parameter of the slice() method −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").slice(2).css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

When we execute the above program, It selects elements starting from the index value "2".

Example 2

In this example, we are passing positive values to both "start" and "stop" parameter of the slice() method −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").slice(1, 4).css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

After executing the above program, It selects elements between the two given positive indices (1 and 4).

Example 3

Here, we are passing a negative value to "start" parameter of the slice() method −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").slice(-3).css("background-color", "green");
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

After executing, It selects elements starting from the given negative index, counting from the end.

Example 4

Here, we are passing negative values to both "start" and "stop" parameter of the slice() method −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("li").slice(-4, -1).css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

After executing the above program, the slice() method selects elements between the two given negative indices, counting from the end.

jquery_ref_traversing.htm

Print Page