Open In App

What is slice() method in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

When there are multiple instances of the selected elements in jQuery, if we want to add particular properties or select elements from a particular index to another index the slice() method in jQuery can be used. Using jQuery’s slice we can add properties to only the range of elements we want to add the property. It is a 0 based indexing.

Syntax:

$('selector').slice(start_index,end_index);

Note:

  • If both start_index and end_index are given all the elements from the start index to the index before the end index gets considered.
  • If the only start_index is given in parameters all the elements from that index to end will get considered.
  • If it is negative it gets considered from the end.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <!-- Including jQuery  -->
    <script
      src=
      letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
    <style>
      h1 {
        color: #006600;
      }
  
      button {
        color: white;
        background-color: #006600;
        width: auto;
        height: 30px;
      }
  
      body {
        text-align: center;
      }
  
      h1 {
        color: black;
      }
  
      div {
        margin: 10px;
        height: 50px;
        width: 50px;
        position: relative;
        float: left;
        text-align: center;
        display: flex;
        border: 3px solid black;
      }
    </style>
  </head>
  
  <body>
    <h1 style="color: #006600">GeeksforGeeks</h1>
  
    <button id="slice1">slice(0,5)</button>
    <button id="slice2">slice(1,3)</button>
    <button id="slice3">slice(4)</button>
    <button id="slice4">slice(-5)</button>
  
    <hr />
  
    <div>
      <h1>0</h1>
    </div>
    <div>
      <h1>1</h1>
    </div>
    <div>
      <h1>2</h1>
    </div>
    <div>
      <h1>3</h1>
    </div>
    <div>
      <h1>4</h1>
    </div>
    <div>
      <h1>5</h1>
    </div>
    <div>
      <h1>6</h1>
    </div>
    <div>
      <h1>7</h1>
    </div>
    <div>
      <h1>8</h1>
    </div>
    <div>
      <h1>9</h1>
    </div>
    <div>
      <h1>10</h1>
    </div>
    <div>
      <h1>11</h1>
    </div>
  
    <script>
      $(document).ready(function () {
        $("#slice1").click(function () {
          $("div").slice(0, 5).css("background-color", "#006600");
        });
        $("#slice1").dblclick(function () {
          $("div").slice(0, 5).css("background-color", "white");
        });
        $("#slice2").click(function () {
          $("div").slice(1, 3).css("background-color", "#006600");
        });
        $("#slice2").dblclick(function () {
          $("div").slice(1, 3).css("background-color", "white");
        });
        $("#slice3").click(function () {
          $("div").slice(4).css("background-color", "#006600");
        });
        $("#slice3").dblclick(function () {
          $("div").slice(4).css("background-color", "white");
        });
        $("#slice4").click(function () {
          $("div").slice(-5).css("background-color", "#006600");
        });
        $("#slice4").dblclick(function () {
          $("div").slice(-5).css("background-color", "white");
        });
      });
    </script>
  </body>
</html>


Output:



Last Updated : 19 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads