Статьи

jQuery: кратко: обход с помощью jQuery

Март 24, 2019

Разница между методами 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')
34
Share: