Фильтрация выбранных элементов в jQuery

В этой статье рассмотрим методы jQuery для фильтрации набора элементов: eq
, even
, filter
, first
, has
, is
, last
, map
, not
, odd
и slice
.
Методы jQuery для фильтрации набора элементов
eq
- по индексу;even
- четные;filter
- по селектору, DOM-элементам, другому набору или посредством функции;first
- первый элемент;has
- оставляет только те элементы, у которых есть потомок, соответствующий указанному селектору или DOM-элементам;is
- возвращает результат проверки набора на соответствие селектору, DOM-элементам, другому набору или посредством функции;last
- последний элемент;map
- создаёт новый набор из значений возвращающих функцией для каждого элемента исходного набора;not
- удаляет из набора элементы, которые соответствуют указанным;odd
- нечётные;slice
- по индексам в указанном диапазоне.
eq
eq
предназначен для уменьшения выборки до одного элемента по указанному индексу.
Синтаксис:
.eq(index)
index
– индекс элемента, который нужно оставить в наборе. Если index
отрицательное число, то отсчёт ведётся с конца. В противном случае – сначала.
В качестве результата данный метод возвращает набор, состоящий из одного элемента или пустой объект jQuery (если нет элемента по указанному индексу).
Пример фильтрации набора с помощью eq
:
<ul id="list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> <script> // получим элементы <li> в #list var $li = $('#list>li'); // оставим в выборке только первый элемент var $firstLi = $li.eq(0); // оставим в выборке предпоследний элемент var $penultLi = $li.eq(-2); </script>
even
even
предназначен для уменьшения выборки, оставляет в ней только чётные (нумерация в наборе осуществляется с 0).
Синтаксис:
.even()
Пример фильтрации набора с помощью even
:
<ul id="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> <script> // получим элементы <li> в #list var $li = $('#list>li'); // оставим только чётные var $even = $li.even(); // One, Three, Five $even.css('background-color', 'yellow'); </script>
filter
filter
предназначен для фильтрации набора по селектору, DOM-элементам, другому набору или посредством функции.
Для примера возьмём список, состоящий из 5 элементов <li>:
<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
1. Фильтрация по селектору:
var set1 = $('#list>li').filter(':odd'); // 2, 4
Код, приведённый выше, применяет к набору $('#list>li')
фильтр filter(':odd')
. Этот фильтр оставляет в наборе только те элементы, которые имеют нечётный индекс.
2. Фильтрация посредством функции. Элементы, для которых функция вернула значение true
остаются в наборе, остальные – нет.
var set2 = $('#list>li').filter(function (index, elem) { // возвращает true, если контент элемента при его преобразовании к числу делится на 2 без остатка return parseInt($(this).text()) % 2 === 0; }); // 2, 4
В функции:
index
– индекс элемента в наборе;elem
– текущий элемент.
Кроме elem
, обратиться к текущему элементу в функции можно с помощью ключевого слова this
.
3. Фильтрация по DOM-элементам. В этом сценарии filter
оставит в наборе только те элементы, которые соответствуют DOM-элементам, переданным ему в качестве аргумента.
var $domElem = document.querySelector('li:first-child'); var set3 = $('#list>li').filter($domElem); // 1
4. Фильтрация по другому набору элементов:
var $evens = $('#list>li:even'); var set4 = $('#list>li:even').filter($evens); // 1, 3, 5
В этом примере в качестве фильтра используем набор элементов $evens
.
first
first
используется для уменьшения выборки до первого элемента.
Синтаксис first
:
.first()
В качестве результата метод first
возвращает объект jQuery, состоящий из первого элемента выборки.
Действия метода first()
аналогичны eq(0)
.
Пример фильтрации выборки с помощью first
:
<div class="message"> <span>text 1...</span> <span>text 2...</span> </div> <script> // оставим в выборке $('.message>span') первый элемент var $firstElem = $('.message>span').first(); // установим тексту первого элемента красный цвет $firstElem.css('color', 'red'); </script>
has
has
применяется для фильтрации набора элементов, оставляет в нём только те элементы, у которых есть потомок, соответствующий указанному селектору или DOM-элементам.
Пример, в котором оставим в выборке только те элементы, у которых имеется потомок <ul>
.
<ul id="list"> <li>1</li> <li>2 <ul> <li>2-1</li> <li>2-2</li> </ul> </li> <li>3</li> <li>4</li> </ul> <script> var $list = $('#list'); // с использованием селектора var set1 = $list.has('ul'); // с использованием DOM-элементов var $ul = document.querySelectorAll('ul'); var set2 = $list.has($ul); </script>
is
is
используется для проверки набора на соответствие селектору, DOM-элементам, другому набору или посредством функции. Метод is
возвращает true
, если хотя бы один из элементов набора соответствует указанным. В противном случае возвращает false
.
Пример использования is
:
<ul id="list"> <li>1</li> <li class="active">2</li> <li>3</li> </ul>
1. С использованием селектора:
var $list = $('#list>li'); var result = $list.is('.active'); // true var result = $list.is('ul'); // false
2. С использованием функции. Метод is
возвращает true
, если проверку проходит хотя бы один элемент из текущего набора (т.е. функция возвращает значение true
). В противном случае is
вернёт false
.
var $list = $('#list>li'); var result = $list.is(function(index, element) { // index – индекс элемента в наборе //element - текущий элемент (обратиться к текущему элементу можно также с помощью this) if ($(this).hasClass('active')) { return true; } });
3. С использованием набора:
var $list = $('#list>li'); var $elements = $('.active'); var result = $list.is($elements); // true
4. С использованием DOM-элементов:
var $list = $('#list>li'); var $elements = document.querySelectorAll('.active'); var result = $list.is($elements); // true
last
last
применяется для уменьшения выборки до последнего элемента.
Синтаксис last
:
.last()
В качестве результата last
возвращает выборку, состоящую из последнего элемента.
Метод last()
выполняет действия аналогичные eq(-1)
.
Например, оставим в выборке только последний элемент:
<ul id="list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> <script> // выберем элементы <li> в #list var $li = $('#list>li'); // отфильтруем выборку, оставив в ней только последний элемент var $lastLi = $li.last(); </script>
map
map
предназначен для создания нового набора из текущего. Выполняется это посредством прогона каждого элемента набора через функцию. Новый набор создаётся из значений возвращаемых функцией.
Создадим с помощью map
новый набор, состоящий из значений элементов <li>
имеющих класс active
:
<ul id="list"> <li>1</li> <li class="active">2</li> <li class="active">3</li> <li>4</li> </ul> <script> var active = $('#list>li').map(function(index, element) { // index - индекс (порядковый номер) элемента в наборе //element - текущий DOM-элемент (обратиться к текущему элементу можно также с помощью this) if ($(this).hasClass('active')) { return $(this).text(); } }) </script>
Поскольку возвращаемое значение представляет собой объект jQuery, содержащий массив, то его обычно переводят в обычный массив с помощью метода get
.
var active = $('#list>li').map(function() { if $(this).hasClass('active') { return $(this).text(); } }).get(); // ["2", "3"]
Вы можете заметить, что не каждое значение которая вернула функция добавляется в новый набор. Если она вернула null
или undefined
, то это значение добавлено не будет.
not
not
предназначен для удаления из набора элементов, которые соответствуют указанным.
Указывать элементы можно с помощью селектора, набора элементов или использовать функцию.
Например, удалим из выборки $('.list>li')
элементы с классом disabled
:
<ul class="list"> <li>One</li> <li class="disabled">Two</li> <li>Three</li> <li>Four</li> <li class="disabled">Five</li> </ul>
1. С помощью селектора:
var $li = $('.list>li'); var set1 = $li.not('.disabled'); // One, Three, Four
2. С помощью набора элементов:
var $li = $('.list>li'); var $elements = $('.disabled'); var set2 = $li.not($elements); // One, Three, Four
3. Посредством функции:
var $li = $('.list>li'); var set3 = $li.not(function (index, element) { // index - индекс элемента в наборе // element - текущий DOM-элемент (обратиться к нему можно также с помощью this) return $(element).hasClass('disabled'); }); // One, Three, Four
odd
odd
предназначен для уменьшения выборки, оставляет в ней только нечётные элементы (нумерация в наборе осуществляется с 0).
Синтаксис:
.odd()
Пример фильтрации набора с помощью odd
:
<ul id="list"> <li>Zero</li> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <script> // получим элементы <li> в #list var $li = $('#list>li'); // оставим только нечётные var $odd = $li.odd(); // One, Three $odd.css('background-color', 'yellow'); </script>
slice
slice
предназначен для уменьшения набора до указанного диапазона (от start
до end
).
Синтаксис slice
:
// start – начальный индекс // end – конечный индекс .slice(start[, end])
Если конечный индекс (end
) не указать, то в выборке останутся элементы от start
до конца набора.
Если отсчёт элемента нужно вести с конца выборки, то используйте в качестве индекса отрицательное число.
Пример использования slice
для фильтрации набора:
<ul id="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> <script> var $li = $('#list>li'); // отфильтруем выборку $li с помощью slice var $set1 = $li.slice(2); // Three, Four, Five var $set2 = $li.slice(-3); // Three, Four, Five var $set3 = $li.slice(2, 4); // Three, Four var $set4 = $li.slice(-3, 4); // Three, Four var $set5 = $li.slice(-2, - 1); // Four </script>