Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

What is slice() method in jQuery ?

  • Last Updated : 19 Aug, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :