jQuery :lt() Selector

What Is :lt()?

:lt(index) (since jQuery 1.0) selects every element whose zero-based index in the matched set is less than index. It is a jQuery extension (not CSS) and is deprecated since 3.4. Prefer .slice(0, index).

// Preferred (official migration)
$("td").slice(0, 4);      // same as :lt(4)
$("td").slice(0, -2);     // same as :lt(-2)

// Legacy selector (deprecated 3.4)
$("td:lt(4)");
$("td:lt(-2)");           // negative since 1.8

// :lt(1) → only index 0 (like .first())
$("li").slice(0, 1);

How to Use .slice() / :lt()

Select with CSS first, then keep elements before an index.

1. Build a matched set with a pure CSS selector: $("td") or $("ul.nav li").
2. Chain .slice(0, index) to keep indices 0 … index - 1.
3. Use a negative end for “all but the last n”: .slice(0, -2).
4. Avoid putting :lt() inside the selector string in new code.
5. Remember: indexing is 0-based on the matched set, not CSS :nth-child.

Pseudocode

build a matched set with a CSS selector
    assign each element index 0, 1, 2, …

keep every element where index < n
    → same as .slice(0, n)

if n is negative:
    count from the end of the set
    keep everything before that end index
    → same as .slice(0, -abs)

Cheat Sheet

Keep these facts handy while filtering by index.

Live Preview

Mark the first three items with .slice(0, 3), try a negative end, or count matches.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Use Try It Yourself for a live editor.

$("td").slice(0, 4).text(function (i, t) {
  return "[lt] " + t;
});

[lt] TD #0 [lt] TD #1 [lt] TD #2
[lt] TD #3 TD #4 TD #5
TD #6 TD #7 TD #8

$("li").slice(0, -2).text(function (i, t) {
  return t + " (kept)";
});
$("#out").text("Kept " + $("li").slice(0, -2).length + " of " + $("li").length);

Kept 3 of 5
(last two items unmarked)

$("#out").text(
  "slice(0,1) → " + $("li").slice(0, 1).text() +
  " | .first() → " + $("li").first().text()
);

slice(0,1) → One | .first() → One

$("#out").text(
  "lt → " + $("li").slice(0, 4).length +
  " | gt → " + $("li").slice(5).length +
  " | index 4 alone → " + $("li").eq(4).length
);

lt → 4 | gt → 4 | index 4 alone → 1

$("#out").text(
  "slice → " + $("p").slice(0, 2).map(function () {
    return $(this).text();
  }).get().join(", ") +
  " | :lt → " + $("p:lt(2)").map(function () {
    return $(this).text();
  }).get().join(", ")
);

slice → Alpha, Beta | :lt → Alpha, Beta

Performance Notes

Pure CSS selection can use the browser engine; :lt() cannot. Chain .slice() after CSS for the best of both.

Key Takeaways