.slice()

Syntax

.slice(start[, end])

Parameters

start: An integer indicating the 0-based position after which the elements are selected
end (optional): An integer indicating the 0-based position before which the elements stop being selected; if omitted, the range continues until the end of the set

Return value

The new jQuery object.

Description

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

Examples

Consider a page with a simple list as follows:

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

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

items 3, 4, and 5 turns red.

index is 0-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:

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

items 3 and 4 are selected.

The index is once again 0-based. The range extends up to, but doesn't include, the specified index.

Negative indices

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

item 4 turns red, as it is the only item in the range between the second from the end (-2) and the first from the end (-1).

Examples

Slice start and end

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           function colorEm() {
              var $div = $("div");
              $div.css("background", "red");
              $div.slice(2, 4).css("background", "yellow");
           }
           $("button").click(colorEm);
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
      <button>Click the button</button>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
  </body>
</html>

Click to view the demo

Slice start till ends

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           function colorEm() {
              var $div = $("div");
              $div.css("background", "red");
              $div.slice(2).css("background", "yellow");
           }
           $("button").click(colorEm);
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
      <button>Click the button</button>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
  </body>
</html>

Click to view the demo

Slice li under a ul

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
var tmpExample = {
  ready : function() {
    $('ul#uiID li').slice(0, 4).addClass('justAdd');
  }
};

$(document).ready(tmpExample.ready);
    </script>
    <style type='text/css'>

ul#uiID {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#uiID li {
    margin: 1px;
    padding: 3px;
}
li.justAdd {
    background: #fcc16e;
}
    </style>
  </head>
  <body id='tmpExample'>
    <ul id='uiID'>
      <li class='liClass1'>A</li>
      <li class='liClass1'>B</li>
      <li class='liClass1'>C</li>
      <li class='liClass1'>D</li>
      <li class='liClass2'>E</li>
      <li class='liClass2'>F</li>
      <li class='liClass2'>G</li>
      <li class='liClass2'>H</li>
      <li class='liClass3'>I</li>
      <li class='liClass3'>J</li>
    </ul>

  </body>
</html>

Click to view the demo