jQuery метод .slice()

Определение и применение

jQuery метод .slice() уменьшает набор совпавших элементов в соответствии с заданным диапазоном индексов элементов.

jQuery синтаксис:

Синтаксис 1.1.4:

JavaScript
$( selector ).slice( start )

$( selector ).slice( start, end )

start - Integer

end - Integer

Добавлен в версии jQuery

1.1.4

Значения параметров

Параметр Описание
start Задает индекс элемента с которого будут выбраны элементы (индекс начинается с 0). Использование отрицательного числа приведет к выбору элементов с конца коллекции, а не с начала. Обязательное значение.
end Задает индекс, до которого выбираются элементы. Сам элемент с индексом end не входит в результат. Использование отрицательного числа приведет к выбору элементов с конца коллекции, а не с начала. Необязательное значение.

Пример использования

Пример использования jQuery метода .slice()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html
HTML
<label>From</label><input type="number" value="5" id="start" /> <label>To <input type="number" id="end" /></label><br />
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<p></p>
main.js
JavaScript
$(document).ready(function () {
    $('#end').val($('div > div').length)
    var slice = function () {
        var fromIndex = $('#start').val()
        var toIndex = $('#end').val()
        $('div > div').slice(fromIndex, toIndex).css('background', 'yellow')
        $('p').html("<b> $( 'div > div' ).slice(" + fromIndex + ', ' + toIndex + ');</b>')
    }
    slice()
    $('input').change(function () {
        $('div > div').css('background', '#fff')
        slice()
    })
})
style.css
CSS
div > div {
    width: 50px;
    height: 50px;
    border: 1px solid green;
    margin: 5px;
    display: inline-block;
}

В этом примере с использованием jQuery метода .slice() мы уменьшаем набор совпавших элементов в соответствии с заданным диапазоном индексов элементов, указанных в качестве значений элементов <input>. Для демонстрации работы метода вы можете ввести произвольные значения, выбранные элементы с помощью метода .css() получат желтый цвет заднего фона.