jQuery / Método / .slice() - Seleccionar un intervalo de índices

En jQuery, .slice(start, end) devuelve un objeto jQuery nuevo para un intervalo de la colección actual, incluyendo start y excluyendo end. Los índices empiezan en cero; omitir end selecciona hasta el último. No elimina otros elementos de la colección original ni del documento.

Leer intervalos e índices negativos

Los índices de la API de .slice() pertenecen a la colección actual, no a posiciones de hermanos bajo un padre HTML. Alpha, Beta, Gamma, Delta, Epsilon y Zeta ocupan 0 a 5. Los negativos cuentan desde el final; -1 es la última posición.

end no es una cantidad: .slice(1, 4) elige tres posiciones, 1, 2 y 3. Use .eq(index) para una sola. .filter() selecciona por condiciones, no por un intervalo continuo.

Ejemplo completo de intervalos y orden de filtros

Guarde todo el código en UTF-8 como slice-demo.html y ábralo en el navegador. Se necesita Internet para el archivo oficial de jQuery 4.0.0 desde la red de distribución de contenido (CDN), sin instalación. Intervalos, filtros, adiciones, reinicio y fragmentos de consola se ejecutaron con 3.7.1 y 4.0.0.

eligible marca elementos que cumplen una condición del ejemplo. Los seis elementos iniciales permanecen en el documento y solo la selección se resalta en turquesa.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select a range from a collection</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; max-width: 100%; }
    li { border: 1px solid #aab; padding: 8px; margin: 4px; }
    .picked { background: #d9f4ef; border-color: teal; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Select a collection range</h1>
  <label for="mode">Range:</label>
  <select id="mode">
    <option value="middle">slice(1, 4)</option>
    <option value="last">slice(-2)</option>
    <option value="inner">slice(1, -1)</option>
    <option value="from">slice(2)</option>
    <option value="filterFirst">filter('.eligible').slice(1, 3)</option>
    <option value="sliceFirst">slice(1, 3).filter('.eligible')</option>
    <option value="empty">slice(4, 2)</option>
  </select>
  <button type="button" id="add">Add Eta</button>
  <button type="button" id="reset">Reset</button>
  <ul id="items">
    <li class="eligible" data-name="Alpha">Alpha (eligible)</li>
    <li data-name="Beta">Beta</li>
    <li class="eligible" data-name="Gamma">Gamma (eligible)</li>
    <li data-name="Delta">Delta</li>
    <li class="eligible" data-name="Epsilon">Epsilon (eligible)</li>
    <li class="eligible" data-name="Zeta">Zeta (eligible)</li>
  </ul>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = $("#items").html();
      function report() {
        const $all = $("#items > li");
        let $selected;
        switch ($("#mode").val()) {
          case "last": $selected = $all.slice(-2); break;
          case "inner": $selected = $all.slice(1, -1); break;
          case "from": $selected = $all.slice(2); break;
          case "filterFirst": $selected = $all.filter(".eligible").slice(1, 3); break;
          case "sliceFirst": $selected = $all.slice(1, 3).filter(".eligible"); break;
          case "empty": $selected = $all.slice(4, 2); break;
          default: $selected = $all.slice(1, 4);
        }
        $all.removeClass("picked");
        $selected.addClass("picked");
        const names = $selected.map(function () { return this.dataset.name; }).get();
        $("#result").text(`source=${$all.length}\nselected=${$selected.length}: ${names.join(", ") || "(none)"}\nDOM items=${$("#items > li").length}`);
      }
      $("#mode").on("change", report);
      $("#add").on("click", function () {
        if (!$("#eta").length) $("#items").append('<li id="eta" class="eligible" data-name="Eta">Eta (eligible)</li>');
        report();
      });
      $("#reset").on("click", function () { $("#items").html(initial); $("#mode").val("middle"); report(); });
      report();
    });
  </script>
</body>
</html>

Inicialmente .slice(1, 4) elige tres elementos. source y DOM items siguen en seis.

source=6
selected=3: Beta, Gamma, Delta
DOM items=6

1. slice(-2) resalta Epsilon y Zeta; slice(1, -1) Beta, Gamma, Delta y Epsilon. Reinicie y cambie una condición cada vez.
2. filter('.eligible').slice(1, 3) reduce primero a Alpha, Gamma, Epsilon y Zeta; luego elige 1 y 2: Gamma y Epsilon.
3. slice(1, 3).filter('.eligible') elige primero Beta y Gamma y después conserva Gamma. La colección anterior cambia la referencia de los índices.
4. slice(4, 2) devuelve cero sin eliminar los seis originales.
5. Con slice(-2), pulse Add Eta: se eligen Zeta y Eta porque report() vuelve a seleccionar los siete. No se permiten adiciones duplicadas.
6. Reset restaura lista y modo .slice(1, 4).

Guardar const $last = $("#items > li").slice(-2) no actualiza la selección con adiciones. Sigue apuntando a Epsilon y Zeta. Vuelva a seleccionar tras cambios del modelo de objetos del documento (DOM) si necesita el intervalo actual.

Comprobar límites y calcular páginas

Después de Reset, ejecute esto en la consola de las herramientas de desarrollo. Los límites excesivos se ajustan a la longitud disponible y un inicio más allá del final queda vacío. La última línea comprueba que los nodos son las mismas referencias, no copias.

const $items = $("#items > li");
const names = $set => $set.map(function () { return this.dataset.name; }).get().join(",");
console.log(`slice(1,4)=${names($items.slice(1, 4))}`);
console.log(`slice(-2)=${names($items.slice(-2))}`);
console.log(`slice(1,-1)=${names($items.slice(1, -1))}`);
console.log(`equal bounds=${$items.slice(3, 3).length}; beyond end=${$items.slice(10).length}`);
console.log(`clamped range=${$items.slice(-99, 99).length}; original=${$items.length}`);
console.log(`same node=${$items.slice(1, 2).get(0) === $items.get(1)}`);

slice(1,4)=Beta,Gamma,Delta
slice(-2)=Epsilon,Zeta
slice(1,-1)=Beta,Gamma,Delta,Epsilon
equal bounds=0; beyond end=0
clamped range=6; original=6
same node=true

Para páginas desde uno y un tamaño entero positivo, start=(page - 1) × pageSize y end=start + pageSize. Este fragmento elige dos elementos de la segunda página. Valide los números antes: una página negativa podría interpretarse como índice desde el final.

const page = 2;
const pageSize = 2;
if (!Number.isInteger(page) || page < 1 || !Number.isInteger(pageSize) || pageSize < 1) {
  throw new RangeError("Use positive integer page and pageSize");
}
const start = (page - 1) * pageSize;
const $pageItems = $("#items > li").slice(start, start + pageSize);
console.log(`page=${page}: ${$pageItems.map(function () { return this.dataset.name; }).get().join(",")}`);

page=2: Gamma,Delta

El código calcula una selección; no oculta otros elementos ni obtiene datos del servidor. La navegación real necesita gestionar visibilidad, cantidad total y página actual. Dividir elementos ya cargados no reduce por sí solo trabajo del servidor ni volumen descargado.

Investigar elementos inesperados

Revise primero .length y el orden actual. Un selector más limitado o .filter() anterior modifica la colección de referencia. No confunda los índices con posiciones CSS de hermanos o numeración desde uno. Para incluir un último índice, pase ese índice más uno como end.

slice no clona, mueve ni elimina nodos. Aplicar .addClass() o .text() al resultado sí modifica los nodos reales compartidos. Use una clonación explícita si necesita independencia. Incluso vacío, un objeto jQuery es verdadero en una condición: compruebe .length en lugar de su valor booleano.