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

Reading time ~4 minutes

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

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

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

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

1
.slice()
таков:

.slice(start,[end])

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

1
start
до
1
end
, если последний задан или до конца, если параметр
1
end
опущен.

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

1
start
включаются в результат, а
1
end
- нет (т.е.
1
.slice(3,5)
вернет элементы, идущие под индексом 3 и 4, элемент с индексом 5 включен не будет).

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

1
-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>

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

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

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

Начальный 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 и не претендует на оригинальность.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024