0Pricing
jQuery Academy · Урок

Расширенная фильтрация с помощью .filter()

Изучите все возможности метода .filter(), используя функции для применения пользовательской логики и выбора элементов на основе динамических свойств или связей.

«Расширенная фильтрация с помощью .filter()» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Уточнение выборки с помощью .filter()

Метод .filter() в jQuery позволяет эффективно сузить уже выбранный набор элементов. Он оставляет только элементы, соответствующие определённым критериям.

Представьте его как второй уровень выборки, применяемый после первоначального выбора для большей точности.

Базовая фильтрация с помощью селекторов

Самый простой способ использовать .filter() — передать ему строку селектора CSS. Это работает так же, как обычный селектор, но применяется только к элементам, уже находящимся в текущем наборе jQuery.

Выберем все div с классом .item, а затем отфильтруем их, оставив только элементы, у которых также есть класс .active.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item active">Item 4</div>

  <script>
    $(document).ready(function(){
      // Select all divs with class 'item'
      var allItems = $('div.item');
      // Then filter to keep only those with class 'active'
      var activeItems = allItems.filter('.active');
      activeItems.css('color', 'blue');
    });
  </script>
</body>
</html>

Пользовательская логика с помощью функции

Настоящая сила .filter() проявляется, когда ему передаётся функция в качестве аргумента. Это позволяет применять к каждому элементу выборки сложную пользовательскую и динамическую логику.

  • Функция выполняется для каждого элемента текущего набора jQuery.
  • Она получает два аргумента: index (позиция элемента в наборе) и element (исходный элемент DOM).
  • Верните true, чтобы оставить элемент, и false, чтобы удалить его из отфильтрованного набора.

Фильтрация по позиции и индексу

Аргумент index в функции фильтрации позволяет выбирать элементы по их позиции в текущем наборе jQuery. Это удобно, например, для выбора каждого второго элемента или определённых диапазонов.

Выберем каждый второй элемент списка (элементы с чётными индексами, начиная с 0) и выделим их.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function(index) {
        // Keep items at even indices (0, 2, 4...)
        return index % 2 === 0;
      }).css('background-color', 'lightgreen');
    });
  </script>
</body>
</html>

По атрибутам и свойствам

Аргумент element (или $(this) внутри функции) позволяет проверить свойства, атрибуты или текстовое содержимое каждого элемента DOM. Это обеспечивает очень точную фильтрацию.

В этом примере мы найдём все элементы списка, в тексте которых есть слово «Important», и выделим их полужирным начертанием.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Task 1</li>
    <li>Important Task 2</li>
    <li>Task 3</li>
    <li>Another Important Task 4</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the text content includes "Important"
        return $(this).text().includes('Important');
      }).css('font-weight', 'bold');
    });
  </script>
</body>
</html>

Динамическая фильтрация по данным

Атрибуты данных HTML5 (например, data-status="active") идеально подходят для хранения дополнительной информации, связанной с приложением, непосредственно в элементах. С помощью .filter() можно выбирать элементы по этим пользовательским значениям данных.

Выделим элементы списка, помеченные как «complete», используя их атрибут data-status.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li data-status="pending">Task A</li>
    <li data-status="complete">Task B</li>
    <li data-status="pending">Task C</li>
    <li data-status="complete">Task D</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check the 'data-status' attribute
        return $(this).data('status') === 'complete';
      }).css('text-decoration', 'line-through');
    });
  </script>
</body>
</html>

Фильтрация по дочернему или родительскому элементу

Функция фильтрации также может проверять связи между элементами. Например, можно выбрать родительские элементы, содержащие определённый дочерний элемент, или наоборот.

В этом примере мы найдём элементы списка, содержащие внутри себя тег <img>, и добавим к ним рамку.

<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Text only</li>
    <li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
    <li>Another text item</li>
    <li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the current <li> contains an <img>
        return $(this).find('img').length > 0;
      }).css('border', '2px solid orange');
    });
  </script>
</body>
</html>

Сложная фильтрация с логикой

Внутри функции фильтрации можно объединять несколько условий с помощью стандартных логических операторов JavaScript, таких как && (AND) и || (OR).

Это позволяет выполнять очень точную выборку сразу по нескольким критериям и делает фильтрацию исключительно мощной:

  • Элемент видим? И у него есть определённый класс?
  • Он содержит текст «X»? Или у него есть атрибут данных «Y»?

Динамическая фильтрация в реальных задачах

Объединим изученные приёмы. Представьте, что нужно отфильтровать список товаров по нескольким критериям. Функция фильтрации может динамически проверять несколько условий.

В этом примере выделяются товары, которые одновременно видимы и относятся к категории «electronics», с использованием объединённой логики внутри функции фильтрации.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product hidden" data-category="books">Novel</div>
  <div class="product" data-category="electronics">Mouse</div>
  <div class="product" data-category="books">Textbook</div>

  <script>
    $(document).ready(function(){
      $('div.product').filter(function() {
        // Filter products that are visible AND in 'electronics' category
        var isVisible = $(this).is(':visible');
        var isElectronics = $(this).data('category') === 'electronics';
        return isVisible && isElectronics;
      }).css('background-color', 'lightblue');
    });
  </script>
</body>
</html>

Задание на фильтрацию

Дан следующий HTML: <li class="item special" data-value="10">...</li>. Какая функция .filter() правильно выбирает только элементы <li>, у которых есть класс .special И значение data-value больше 5?

Итоги: возможности динамической фильтрации

Теперь вы освоили расширенное применение метода .filter() в jQuery!

  • Он уточняет существующие выборки и обеспечивает точный контроль.
  • Использование функции открывает возможности для динамической и сложной логики фильтрации.
  • Можно проверять индексы, свойства элементов, атрибуты данных и связи между элементами.
  • Объединяйте несколько условий с помощью && (AND) и || (OR), чтобы задавать очень точные критерии.

Этот мощный метод позволяет создавать чрезвычайно отзывчивые пользовательские интерфейсы, управляемые данными.

Часто задаваемые вопросы

Урок «Расширенная фильтрация с помощью .filter()» бесплатный?

Да — полный текст урока «Расширенная фильтрация с помощью .filter()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Расширенная фильтрация с помощью .filter()»?

Изучите все возможности метода .filter(), используя функции для применения пользовательской логики и выбора элементов на основе динамических свойств или связей. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Расширенная фильтрация с помощью .filter()»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание пользовательских псевдоселекторов
  2. Расширенная фильтрация с помощью .filter()
  3. Исключение элементов с помощью .not()
← Назад к jQuery Academy