Ранее мы говорили о фильтрах селекторов, которые помогают нам произвести более качественную выборку. В 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, и, следовательно, весь список будет закрашен.