Разница между методами find () и filter ()
Метод filter() используется для фильтрации текущего набора элементов, содержащихся в наборе обертки. Его использование следует оставить для задач, которые требуют фильтрации набора элементов, которые уже выбраны. Например, приведенный ниже код отфильтрует три элемента <p> содержащиеся в наборе упаковщиков.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p><strong>first</strong></p>
<p>middle</p>
<p><strong>last</strong></p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) { // Alerts middle, by filtering out the first
// and last <p> elements in the wrapper set.
alert($(‘p’).filter(‘:not(:first):not(:last)’).text());
})(jQuery);
</body>
</html>
|
Примечания: при использовании filter() всегда спрашивайте себя, действительно ли это необходимо. Например, $('p').filter(':not(:first):not(:last)') можно записать без filter() $ (‘p: not (: first): not (: last) «).
Метод find() , с другой стороны, может использоваться для дальнейшего поиска потомков выбранных в данный момент элементов. Думайте о find() больше как об обновлении или изменении текущего упакованного набора с новыми элементами, которые инкапсулированы в уже выбранных элементах. Например, приведенный ниже код заменит функцию обернутого набора элементов <p> на два элемента <strong> с помощью find() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p><strong>first</strong></p>
<p>middle</p>
<p><strong>last</strong></p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alerts «strong»
alert($(‘p’).find(‘strong’).get(0).nodeName);
})(jQuery);
</body>
</html>
|
Примечания: Фактически вы можете объединить элементы в оболочке, предшествующей использованию метода find() с текущими элементами, используя andSelf() — например, $('p').find('strong').andSelf() .
Концепция, которую нужно убрать, состоит в том, что filter() будет только уменьшать (или фильтровать) выбранные в данный момент элементы в наборе оберток, в то время как find() может фактически создать совершенно новый набор обернутых элементов.
Примечания: оба find() и filter() являются деструктивными методами, которые можно отменить с помощью end() , который вернет упакованный набор обратно в его предыдущее состояние до find() как использовались find() или filter() .
Передача filter () функции вместо выражения
Прежде чем запускать и создавать пользовательский фильтр для выбора элементов, возможно, имеет смысл просто передать метод traversing filter() — функцию, которая позволит вам проверить каждый элемент в наборе оберток для определенного сценария.
Например, допустим, вы хотите обернуть все элементы <img> на странице HTML элементом <p> который в настоящее время не обернут этим элементом.
Вы можете создать собственный фильтр для выполнения этой задачи или использовать метод filter() , передав ему функцию, которая определит, является ли родительский элемент элементом <p> , а если нет, то удалит элемент из набора. перед тем, как обернуть элементы <img> оставшиеся в наборе, в элемент <p> .
В следующем примере я выбираю каждый элемент <img> на странице HTML, а затем передаю метод filter() функцию, которая используется для итерации по каждому элементу (использующему this ) в наборе оберток, проверяя, есть ли Родительский элемент <img> elements является элементом <p> .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<img>
<img>
<p>
<img>
</p>
<img>
<p>
<img>
</p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘img’).attr(‘src’, ‘http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif’).filter(function () { return !$(this).parent(‘p’).length == 1 }).wrap(‘<p></p>’);
})(jQuery);
</body>
</html>
|
Обратите внимание, что я использую ! оператор для изменения логического значения true на false. Это потому, что я хочу удалить элементы <img> из набора, которые имеют элементы <p> качестве родительского элемента. Функция, переданная методу filter() , удалит элементы из набора, только если функция вернет false.
Суть в том, что если вы имеете дело с изолированной ситуацией, можно создать собственный фильтр, например :findImgWithNoP для отдельной ситуации, просто передав методу фильтра функцию, которая может выполнять пользовательскую фильтрацию. Эта концепция довольно мощная. Рассмотрим, что возможно, когда мы используем тест регулярных выражений в сочетании с методом filter() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<ul>
<li>jQuery is great.</li>
<li>It’s lightweight.</li>
<li>Its free!</li>
<li>jQuery makes everything simple.</li>
</ul>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Wrap a <strong> element around any text within
// a <li> that contains the pattern «jQuery»
var pattern = /jQuery/i;
$(‘ul li’).filter(function () { return pattern.test($(this).text()); }).wrap(‘<strong></strong>’);
})(jQuery);
</body>
</html>
|
Обходя DOM
Вы можете легко пройти DOM к элементам-предкам, используя методы parent() , parent() и closest() . Понимание различий между этими методами имеет решающее значение. Изучите приведенный ниже код и убедитесь, что вы понимаете различия между этими методами обхода jQuery.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div id=»parent2″>
<div id=»parent1″>
<div id=»parent0″>
<div id=»start»></div>
</div>
</div>
</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alerts «parent0» x4
alert($(‘#start’).parent().attr(‘id’));
alert($(‘#start’).parents(‘#parent0’).attr(‘id’));
alert($(‘#start’).parents()[0].id);
// Gets actual DOM element
alert($(‘#start’).closest(‘#parent0’).attr(‘id’));
// Alerts «parent1» x4
alert($(‘#start’).parent().parent().attr(‘id’));
alert($(‘#start’).parents(‘#parent1’).attr(‘id’));
alert($(‘#start’).parents()[1].id);
// Gets actual DOM element
alert($(‘#start’).closest(‘#parent1’).attr(‘id’));
// Alerts «parent2» x4
alert($(‘#start’).parent().parent().parent().attr(‘id’));
alert($(‘#start’).parents(‘#parent2’).attr(‘id’));
alert($(‘#start’).parents()[2].id);
// Gets actual DOM element
alert($(‘#start’).closest(‘#parent2’).attr(‘id’));
})(jQuery);
</body>
</html>
|
Примечания: closest() и parents() могут иметь одинаковую функциональность, но closest() фактически включит выбранный в данный момент элемент в свою фильтрацию.
closest() прекращает обход, как только находит совпадение, тогда как parents() получает всех родителей и затем фильтрует ваш необязательный селектор. Следовательно, closest() может возвращать максимум один элемент.
Методы обхода Принимать выражения CSS как необязательные аргументы
Выражения CSS не только передаются в функцию jQuery для выбора элементов, но они также могут быть переданы нескольким из методов обхода. Это может быть легко забыто, потому что многие из методов обхода функционируют без использования какого-либо выражения вообще, например, next() . Выражение является необязательным для следующих методов обхода, но помните, что у вас есть возможность предоставить выражение для фильтрации.
-
children('expression') -
next('expression') -
nextAll('expression') -
parent('expression') -
parents('expression') -
prev('expression') -
prevAll('expression') -
siblings('expression') -
closest('expression')