.slice()

Categories: Traversing > Filtering

.slice( start [, end ] )Returns: jQuery

Description: Reduce the set of matched elements to a subset specified by a range of indices.

  • version added: 1.1.4.slice( start [, end ] )

    • start
      Type: Integer
      An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.
    • end
      Type: Integer
      An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.

Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.

Consider a page with a simple list on it:

1
2
3
4
5
6
7
 
<ul>
  <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:

1
 
$( "li" ).slice( 2 ).css( "background-color", "red" );

The result of this call is a red background for items 3, 4, and 5. Note that the supplied index is zero-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:

1
 
$( "li" ).slice( 2, 4 ).css( "background-color", "red" );

Now only items 3 and 4 are selected. The index is once again zero-based; the range extends up to but not including the specified index.

Negative Indices

The jQuery .slice() method is patterned after the JavaScript .slice() method for arrays. One of the features that it mimics is the ability for negative numbers to be passed as either the start or end parameter. If a negative number is provided, this indicates a position starting from the end of the set, rather than the beginning. For example:

1
 
$( "li" ).slice( -2, -1 ).css( "background-color", "red" );

This time only list item 4 is turned red, since it is the only item in the range between two from the end (-2) and one from the end (-1).

Examples:

Turns divs yellow based on a random slice.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slice demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
  }
  span {
    color: red;
    font-weight: bold;
  }
  button {
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button>Turn slice yellow</button>
  <span>Click the button!</span></p>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
<script>
function colorEm() {
  var $div = $( "div" );
  var start = Math.floor( Math.random() * $div.length );
  var end = Math.floor( Math.random() * ( $div.length - start ) ) +
    start + 1;
  if ( end === $div.length ) {
    end = undefined;
  }
  $div.css( "background", "" );
  if ( end ) {
    $div.slice( start, end ).css( "background", "yellow" );
  } else {
    $div.slice( start ).css( "background", "yellow" );
  }
  $( "span" ).text( "$( 'div' ).slice( " + start +
    (end ? ", " + end : "") +
    ").css( 'background', 'yellow' );" );
}
 
$( "button" ).click( colorEm );
</script>
 
</body>
</html>

Demo:

Selects all paragraphs, then slices the selection to include only the first element.

1
 
$( "p" ).slice( 0, 1 ).wrapInner( "<b></b>" );

Selects all paragraphs, then slices the selection to include only the first and second element.

1
 
$( "p" ).slice( 0, 2 ).wrapInner( "<b></b>" );

Selects all paragraphs, then slices the selection to include only the second element.

1
 
$( "p" ).slice( 1, 2 ).wrapInner( "<b></b>" );

Selects all paragraphs, then slices the selection to include only the second and third element.

1
 
$( "p" ).slice( 1 ).wrapInner( "<b></b>" );

Selects all paragraphs, then slices the selection to include only the third element.

1
 
$( "p" ).slice( -1 ).wrapInner( "<b></b>" );