Метод slice библиотеки jQuery

Достаточно интересный (для меня) метод выборки элементов из коллекции - метод

.slice()

. Хотя чего-то эдакого в этом методе нет совсем.

Просто этот метод позволяет установить диапазон (область), по которому (внутри которой) будут выбираться элементы.

Синтаксис метода

.slice()

таков:

.slice(start,[end])

Возвращает элементы с индексами от

start

до

1
end

, если последний задан или до конца, если параметр

1
end

опущен.

Элементы с индексом

start

включаются в результат, а

1
end

- нет (т.е.

1
.slice(3,5)

вернет элементы, идущие под индексом 3 и 4, элемент с индексом 5 включен не будет).

Кроме этого, параметры могут быть заданы в форме отрицательных чисел, в таком случае, отсчет элементов идет с конца набора:

-1

– последний элемент,

1
-2

– предпоследний элемент и т. д.

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

1	$("div").slice(3)

- вернет все div-элементы, начиная с четвертого (с индексами 3, 4, …)

1
$("div").slice(3, 5)

- вернет div-элементы с индексами 3 и 4

1
$("div").slice(-4, -2)

- вернет div-элементы, идущие четвертым и третьим с конца

1
$("div").slice(-2)

- вернет предпоследний и последний div-элементы на странице

Приведу пример HTML-разметки:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Такой javascript-код:

$(function(){
  var list = $('.test');
  list.find('li').slice(2,10).addClass('test__link--sliced');
});

… выполнит следующее:

создаст переменную 1 list и поместит в нее результат выборки - 1 $('.test')
найдет в переменной 1 list все элементы 1 li - 1 .find('li')
в найденной коллекции определит диапазон элементов 1 li с индексами с 2-го по 10-й - 1 .slice(2,10)
добавит к элементам 1 li этого диапазона класс - 1 .addClass('test__link--sliced')
но не добавит класс 1 .test__link--sliced к элементу 1 li с индексом 10!

Результатом выполнения показанного выше js-кода будет такая HTML-разметка:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Обратите внимание, что нумерация элементов начинается с

- это индекс элемента! Элемент с последним индексом не включен в выборку!

Еще один пример, более краткий и наглядный.

Начальный HTML-код:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

JavaScript-код:

$(function(){
  var bad = $('.bad');
  bad.find('li').slice(2,4).addClass('bad__item--sliced');
});

Результат:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

На этом все. Материал частично основан на ресурсе jquery.page2page и не претендует на оригинальность.

Метод slice библиотеки jQuery

May 26, 2015

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

VSC - explorer.compactFolders

Flattering operators

Оператор withLatestFrom