jQuery .slice() Method

What You’ll Learn

The .slice() traversing method reduces a jQuery collection to a subset by index range — with an optional end index that is exclusive, and negative indexes counting from the end. This tutorial covers the official list-item demos, random div slice button, pagination pattern, and compares .slice() with .eq(), .first(), .last(), and .filter().

Introduction

A jQuery selector like $("li") often matches multiple elements. Sometimes you need a contiguous block — items 3 through 5, the last two entries, or page 2 of a list. The .slice() method picks a range of elements from the current collection by their positions.

Available since jQuery 1.1.4, .slice(start [, end]) returns a new jQuery object containing only the elements in the specified index range. Indexes are zero-based and refer to the position within the jQuery object — not the element’s rank in the entire DOM document.

Understanding the .slice() Method

Given a jQuery object with zero or more matched elements, .slice(start [, end]) constructs a new jQuery object from elements at indexes start up to but not including end. If end is omitted, every element from start through the last index is included.

The method mirrors Array.prototype.slice: positive indexes count from the start; negative indexes count from the end. The range is always relative to the current jQuery collection, not the full DOM tree.

📝 Syntax

General form of .slice:

.slice( start [, end ] )

Parameters

• start (required) — an integer indicating the 0-based position at which selection begins. A negative integer counts backwards from the end of the set.
• end (optional) — an integer indicating the 0-based position at which selection stops. The element at this index is not included. Negative values count from the end. If omitted, the range continues to the last element.

Return value

• A new jQuery object containing the subset of elements in the specified range — possibly empty if the range falls outside the set.

Official jQuery API list examples

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

// Items 3, 4, 5 → red (from index 2 to end)



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

// Items 3, 4 only (indexes 2–3; end 4 is exclusive)



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

// Item 4 only (between two from end and one from end)

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 shows a pagination pattern. Use DevTools or the Try-it links to run each snippet in the browser.

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

list items 3, 4, 5 → red background

Items 1, 2 → unchanged

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

list items 3, 4 → red background

Item 5 → unchanged (index 4 excluded)

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

list item 4 → red background

Items 1–3, 5 → unchanged

.slice(-1) would select item 5 (last)

function colorEm() {

  var $div = $( "div.slice-demo" );

  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.slice-label" ).text(

    "$( 'div' ).slice( " + start +

    ( end ? ", " + end : "" ) +

    " ).css( 'background', 'yellow' );"

  );

}

$( "button.slice-btn" ).on( "click", colorEm );

Each click → random start/end applied via .slice()

Matched divs in range → yellow background

Label shows the exact .slice() call used

var pageSize = 3;

var pageNum = 2; // human page number

var start = ( pageNum - 1 ) * pageSize; // → 3

var end = start + pageSize;             // → 6



$( "li" ).hide();

$( "li" ).slice( start, end ).show();

// Page 2 → indexes 3, 4, 5 (items 4, 5, 6)

Items 1–3, 7–9 → hidden

Items 4, 5, 6 → visible (page 2)

Formula: start = (page − 1) × pageSize

🚀 Common Use Cases

• Pagination — show one page of results with .slice(start, end).
• Load more — reveal the next batch with .slice(0, visibleCount) vs .slice(visibleCount, visibleCount + batch).
• Trim collections — skip the first N items with .slice(n).
• Last N items — combine negative start with no end: .slice(-3).
• Carousel windows — display a sliding window of slides by index range.
• After filtering — take a subset from a narrowed .filter() collection without re-querying the DOM.

📝 Notes

• Available since jQuery 1.1.4.
• Indexes are zero-based and relative to the current jQuery collection.
• The end index is exclusive — the element at end is not included.
• Patterned after Array.prototype.slice; negative indexes count from the end.
• .first() equals .slice(0, 1); .last() equals .slice(-1).
• .eq(n) picks one element; .slice() picks a range — use the right tool for the job.
• Does not modify the DOM — only narrows which elements the jQuery object refers to.

💡 Best Practices