Ранее мы говорили о фильтрах селекторов, которые помогают нам произвести более качественную выборку. В jQuery также присутствуют специальные методы, предназначенные для фильтрации, которые фактически имеют тот же самый эффект, что и фильтры селекторов.
Метод filter(условие)
принимает в качестве параметра условие фильтрации. И если элементы выборки не соответствуют этому условию,
то они исключаются из выборки. В зависимости от того, что представляет собой условие, данный метод имеет следующие варианты использования:
filter(селектор)
: если объекты выборки не удовлетворяют селектору, то они исключаются
filter(элемент)
: если объекты выборки не представляют данный элемент html, то они исключаются
filter(jQuery)
: если объекты выборки не представляют данный объект jQuery, то они исключаются
filter(функция)
: для каждого элемента выборки вызывается функция, и если эта функция возвращает false
, то элемент
исключается из выборки
Например, выберем все элементы с атрибутом class="header"
, которые также являются элементами строк таблицы:
$(function(){ //Фильтрация по селектору var array = $(".header").filter("tr"); array.css('background-color', 'silver'); // Фильтрация по элементу html var elem = document.getElementsByTagName("tr")[0]; var array1 = $(".header").filter(elem); array1.css('background-color', 'silver'); });
Данный вариант является аналогом выражения $("tr.header")
, поэтому того же результата мы опять же можем добиться, скомбинировав селекторы.
Теперь посмотрим, как использовать функцию.
$(function(){ var array = $("tr").filter(function(){ if($(this).hasClass("header")) { return true;} else {return false;} }); array.css('background-color', 'silver'); });
Во-первых, функция вызывается для каждого элемента, а текущий элемент мы получаем с помощью выражения $(this)
. Далее с помощью
метода hasClass("header")
мы определяем, содержит ли текущий элемент класс header. И если содержит, то возвращаем true.
Противоположным по действию по сравнению с методом filter является метод not
. Он исключает из выборки те элементы, которые соответствуют
условию. Данный метод может иметь следующие варианты использования:
not(селектор)
: если объекты выборки удовлетворяют селектору, то они исключаются
not(элемент)
: если объекты выборки представляют данный элемент html, то они исключаются
not(jQuery)
: если объекты выборки представляют данный объект jQuery, то они исключаются
not(функция)
: для каждого элемента выборки вызывается функция, и если эта функция возвращает true
, то элемент
исключается из выборки
Например, мы можем в предыдущем примере заменить filter на метод not и тогда получим противоположный результат:
$(function(){ var array = $("tr").not(function(){ if($(this).hasClass("header")) { return true;} else {return false;} }); array.css('background-color', 'silver'); });
Метод slice(begin, end)
исключает из выборки те элементы, которые не попадают в диапазон, задаваемый параметрами begin и end.
Подразумевается, что индексация начинается с 0.
Негативные индексы означают, что выборка ведется с конца набора.
Необязательный параметр end задает позицию с которой выборка элементов уже прекращена,
если этот параметр отсутствует, то выборка ведется до конца набора:
$(function(){ var array = $("tr").slice(1,4); array.css('background-color', 'silver'); });
В данном случае итоговая выборка будет содержать 3 элемента tr.
Второй вариант функции slice предполагает задание одного параметра - начального индекса, с которого ведется выборка:
$(function(){ var array = $("tr").slice(3); array.css('background-color', 'silver'); });
В этом случае в выборку будут включены все объекты, начиная с 4-го.
Метод has(вложенный элемент)
проверяет объект на наличие вложенного элемента. И если объект содержит вложенный элемент, то этот
объект остается в выборке. Он может иметь следующие варианты вызова:
has(селектор)
: если объекты содержат элемент, соответствующий селектору, то они остаются в выборке
has(элемент)
: если объекты содержат данный элемент html, то они остаются в выборке
Например, у нас на странице есть список с вложенными списками. И нам надо выделить тот элемент списка, который имеет вложенный список:
<ul> <li>Пункт 1</li> <li>Пункт 2 <ul> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> </li> <li>Пункт 3</li> </ul>
Тогда мы можем использовать следующее выражение: $('li').has('ul').css('background-color', 'silver');
Метод map(callback)
предназначен для преобразования элементов выборки с помощью функции, которая передается в параметре callback
.
А данная функция отбирает элементы из имеющегося для нового набора и на выходе возвращает этот новый набор. Воспользуемся примером с вложенными списками:
<ul> <li>Пункт 1</li> <li>Пункт 2 <ul> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> </li> <li>Пункт 3</li> </ul>
Теперь отберем только те элементы, которые имеют вложенные списки:
$(function(){ var array = $('li').map(function(index,elem){ return $(elem).children()[0]; }); array.each(function(index, elem){ console.log(elem.innerHTML); }); array.css('background-color', 'silver'); });
Функция, передаваемая в метод map, пробегает по всем элементам выборки и принимает два параметра: index - индекс перебираемого элемента в выборке и elem - сам перебираемый элемент. Получив текущий элемент при переборе, мы можем провести с ним некоторые манипуляции и определить, должен он или какие-то другие элементы попасть в новую выборку.
Так, в данном случае мы передаем перебираемый элемент в функцию jQuery, чтобы нам стали доступными методы jQuery, и получаем первый вложенный список:
$(elem).children()[0];
(метод children помогает получить вложенные или дочерние элементы).
Далее мы можем управлять результирующим набором так же, как и любой другой выборкой, например, перебирать, устанавливать свойства и т.д.
Метод is (условие)
определяет, имеются ли в данной выборке объекты, соответствующие условию. В зависимости от условия данный
метод имеет следующие варианты использования:
is(селектор)
: проверяет, соответствует ли хотя бы дин объект выборки селектору
is(элемент)
: проверяет, присутствует ли в выборке данный элемент html
is(jQuery)
: проверяет, присутствует ли в выборке данный объект jQuery
is(функция)
: поиск в выборке объектов, соответствующих данному элементу html
На выходе метод is возвращает булевое значение: true, если хотя бы один элемент выборки соответствует условию, и false, если такого соответствия не найдено. Например, у нас есть такая разметка:
<ul class="menu"> <li>Пункт 1</li> <li>Пункт 2 <ul class="submenu"> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ul> </li> <li>Пункт 3</li> </ul>
Используем метод is:
var lists = $('ul'); if(lists.is('.submenu')){ lists.css('background-color', 'silver'); }
Поскольку один из элементов списка содержит вложенный подсписок с классом submenu, то метод is взвратит true, и, следовательно, весь список будет закрашен.