slice()

.slice( start, [ end ] )

Returns: jQuery

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

.slice( start, [ end ] )

version added: 1.1.4

start

An integer indicating the 0-based position after which the elements are selected. If negative, it indicates an offset from the end of the set.

end (optional)

Integer

An integer indicating the 0-based position before 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 from a subset of the matching elements. 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:

<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:

$('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.

list item 1
list item 2
list item 3
list item 4
list item 5

The end parameter allows us to limit the selected range even further. For example:

$('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.

list item 1
list item 2
list item 3
list item 4
list item 5

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:

$('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).

list item 1
list item 2
list item 3
list item 4
list item 5

Examples

Example 1

Turns divs yellow based on a random slice.

    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);

The output of the code above will be:

Try it yourself

Example 1 - Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    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>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
</head>
<body>
  <button>Turn slice yellow</button>
  <span>Click the button!</span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

Try it yourself

Example 2

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

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

Example 3

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

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

Example 4

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

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

Example 5

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

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

Example 6

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

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

Was this information helpful?

Yes No

slice()

.slice( start, [ end ] )

.slice( start, [ end ] )

Negative Indices

Examples

Example 1

Example 1 - Full source:

Example 2

Example 3

Example 4

Example 5

Example 6

Comments