Описание: Сокращение набора элементов, которое соответствует подмножеству указанного диапазона индексов.
.slice( начало, [ конец ] )
Добавлена в версию: 1.1.4
начало
Целое указывающее позицию (начиная с 0), после которой элементы выбраны. Если число отрицательное, оно указывает на смещение от конца набора.
конец (опционально)
Целое указывающее позицию (начиная с 0), перед которой элементы перестают быть выбраны. Если число отрицательное, оно указывает на смещение от конца набора.
Если не указано, то концом подмножества является конец самой выборки.
Данный объект jQuery который представляет собой набор элементов DOM, метод .slice() создает новый объект jQuery из подмножества соответствующих элементов. Поставляемый индекс start
определяет положение одного из элементов во множестве; если end
опущен, то все элементы, после start будут включены в результат.
Рассмотрим страницу с простым списком на ней:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
Мы можем применить этот метод к набору элементов списка:
$('li').slice(2).css('background-color', 'red');
Результатом этого вызова является красный фон для пунктов 3, 4, и 5.
Имейте в виду, что индекс начинается с 0,
и относится к позиции элементов в объекте jQuery, а не в дереве DOM.
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
Параметр
end позволяет нам ограничить выбранный диапазон. Например:
$('li').slice(2, 4).css('background-color', 'red');
Теперь только пункты 3 и 4 будут выбранны.
Индекс начинается с нуля; диапазон простирается вплоть до, но не включая указанного индекса.
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
Отрицательные индексы
Метод jQuery .slice()
является образцом метода JavaScript .slice() для массивов.
Одна из возможностей, это передача отрицательных чисел, которые передаются либо как параметр start, либо как end.
Если отрицательное число представленно, оно указывает на место, начиная с конца набора, а не с начала.
Например:
$('li').slice(-2, -1).css('background-color', 'red');
На этот раз, только пункт 4 списка становится красным,
так как это единственный элемент в промежутке 2 от конца
(-2) и 1 от конца (-1).
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
Примеры
Пример 1
Случайным образом закрашивает элементы div. function colorEm() {
var $div = $("div");
var start = Math.floor(Math.random() *
$div.length);
var end = Math.floor(Math.random() *
($div.length - start)) +
start + 1;
if (end == $div.length) end = undefined;
$div.css("background", "");
if (end)
$div.slice(start, end).css("background", "yellow");
else
$div.slice(start).css("background", "yellow");
$("span").text('$("div").slice(' + start +
(end ? ', ' + end : '') +
').css("background", "yellow");');
}
$("button").click(colorEm);
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ function colorEm() { var $div = $("div"); var start = Math.floor(Math.random() * $div.length); var end = Math.floor(Math.random() * ($div.length - start)) + start + 1; if (end == $div.length) end = undefined; $div.css("background", ""); if (end) $div.slice(start, end).css("background", "yellow"); else $div.slice(start).css("background", "yellow"); $("span").text('$("div").slice(' + start + (end ? ', ' + end : '') + ').css("background", "yellow");'); } $("button").click(colorEm); }); </script> <style> div { width:40px; height:40px; margin:10px; float:left; border:2px solid blue; } span { color:red; font-weight:bold; } button { margin:5px; } </style> </head> <body> <button>Turn slice yellow</button> <span>Click the button!</span> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
Пример 2
Выделяет все параграфы на странице,затем разделяет выборку таким образом, чтобы захватить только первый элемент.$("p").slice(0, 1).wrapInner("<b></b>");
Пример 3
Выделяет все параграфы на странице, затем разделяет выборку таким образом, чтобы захватить только первый и второй элементы.$("p").slice(0, 2).wrapInner("<b></b>");
Пример 4
Выделяет все параграфы на странице, затем разделяет выборку таким образом, чтобы захватить только второй элемент.$("p").slice(1, 2).wrapInner("<b></b>");
Пример 5
Выделяет все параграфы на странице,затем разделяет выборку таким образом, чтобы захватить только второй и третий элементы.$("p").slice(1).wrapInner("<b></b>");
Пример 6
Выделяет все параграфы на странице,затем разделяет выборку таким образом, чтобы захватить только третий элемент.$("p").slice(-1).wrapInner("<b></b>");
Была ли эта информация полезной?
