0Pricing
jQuery Academy · Lekcja

Zaawansowane filtrowanie za pomocą .filter()

Proszę poznać pełne możliwości metody .filter(), używając funkcji do stosowania niestandardowej logiki i wybierania elementów na podstawie dynamicznych właściwości lub relacji.

Zaawansowane filtrowanie za pomocą .filter() to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Doprecyzowywanie wyboru za pomocą .filter()

Metoda .filter() w jQuery to skuteczny sposób na zawężanie istniejącego zbioru wybranych elementów. Pozwala pozostawić tylko te elementy, które spełniają określone kryteria.

Można myśleć o niej jak o drugiej warstwie wyboru, stosowanej po wyborze początkowym w celu uzyskania większej precyzji.

Podstawowe filtrowanie za pomocą selektorów

Najprostszym sposobem użycia .filter() jest przekazanie ciągu selektora CSS. Działa to tak jak standardowy selektor, ale dotyczy tylko elementów znajdujących się już w bieżącym zbiorze jQuery.

Wybierzmy wszystkie elementy div z klasą .item, a następnie przefiltrujmy je, pozostawiając tylko te, które mają również klasę .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>

Niestandardowa logika za pomocą funkcji

Pełna moc .filter() ujawnia się po przekazaniu funkcji jako argumentu. Pozwala to zastosować do każdego elementu w wybranym zbiorze niestandardową i dynamiczną logikę.

  • Funkcja jest uruchamiana dla każdego elementu w bieżącym zbiorze jQuery.
  • Otrzymuje dwa argumenty: index (pozycję elementu w zbiorze) oraz element (surowy element DOM).
  • Zwróć true, aby pozostawić element, lub false, aby usunąć go z przefiltrowanego zbioru.

Filtrowanie według pozycji indeksu

Argumentu index w funkcji filtra można użyć do wybierania elementów na podstawie ich pozycji w bieżącym zbiorze jQuery. Jest to przydatne między innymi podczas wybierania co drugiego elementu lub określonych zakresów.

Wybierzmy co drugi element listy (elementy o parzystych indeksach, zaczynając od 0) i wyróżnijmy je.

<!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>

Na podstawie atrybutów i właściwości

Argument element (lub $(this) wewnątrz funkcji) pozwala sprawdzać właściwości, atrybuty i zawartość tekstową każdego elementu DOM. Umożliwia to bardzo precyzyjne filtrowanie.

Znajdziemy tutaj wszystkie elementy listy, które zawierają w tekście słowo „Important”, i pogrubimy je.

<!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>

Dynamiczne filtrowanie z użyciem danych

Atrybuty danych HTML5 (np. data-status="active") doskonale nadają się do przechowywania dodatkowych, właściwych dla aplikacji informacji bezpośrednio w elementach. Za pomocą .filter() można wybierać elementy na podstawie tych niestandardowych wartości danych.

Wyróżnijmy elementy listy oznaczone jako „complete”, korzystając z ich atrybutu 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>

Filtrowanie według elementu potomnego lub nadrzędnego

Funkcja filtra może również sprawdzać relacje między elementami. Można na przykład chcieć wybrać elementy nadrzędne zawierające określony element potomny lub odwrotnie.

Znajdziemy tutaj elementy listy, które zawierają w sobie znacznik <img>, i dodamy do nich obramowanie.

<!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>

Złożone filtry z użyciem logiki

Wewnątrz funkcji filtra można łączyć wiele warunków za pomocą standardowych operatorów logicznych JavaScript, takich jak && (AND) i || (OR).

Pozwala to bardzo precyzyjnie wybierać elementy na podstawie kilku kryteriów jednocześnie, dzięki czemu filtrowanie staje się niezwykle elastyczne:

  • Czy element jest widoczny? ORAZ czy ma określoną klasę?
  • Czy zawiera tekst „X”? LUB czy ma atrybut danych „Y”?

Dynamiczne filtrowanie w praktyce

Zastosujmy teraz zdobytą wiedzę. Wyobraź sobie filtrowanie listy produktów na podstawie wielu kryteriów. Funkcja filtra może dynamicznie sprawdzać kilka warunków.

Ten przykład wyróżnia produkty, które są jednocześnie widoczne ORAZ należą do kategorii „electronics”, korzystając ze złożonej logiki wewnątrz funkcji filtra.

<!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>

Wyzwanie: filtrowanie

Mając kod HTML <li class="item special" data-value="10">...</li>, która funkcja .filter() poprawnie wybiera wyłącznie elementy <li>, które mają klasę .special ORAZ wartość data-value większą niż 5?

Podsumowanie: możliwości dynamicznego filtrowania

Opanowali już Państwo zaawansowane zastosowania metody jQuery .filter()!

  • Uściśla istniejące wybory, zapewniając precyzyjną kontrolę.
  • Użycie funkcji odblokowuje dynamiczną i złożoną logikę filtrowania.
  • Można sprawdzać indeksy, właściwości elementów, atrybuty danych i relacje.
  • Można łączyć wiele warunków za pomocą && (AND) i || (OR), aby definiować bardzo szczegółowe kryteria.

Ta zaawansowana metoda pozwala tworzyć niezwykle responsywne interfejsy użytkownika sterowane danymi.

Często zadawane pytania

Czy lekcja „Zaawansowane filtrowanie za pomocą .filter()” jest bezpłatna?

Tak — pełny tekst „Zaawansowane filtrowanie za pomocą .filter()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Zaawansowane filtrowanie za pomocą .filter()”?

Proszę poznać pełne możliwości metody .filter(), używając funkcji do stosowania niestandardowej logiki i wybierania elementów na podstawie dynamicznych właściwości lub relacji. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Zaawansowane filtrowanie za pomocą .filter()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie niestandardowych pseudoselektorów
  2. Zaawansowane filtrowanie za pomocą .filter()
  3. Wykluczanie elementów za pomocą .not()
← Powrót do jQuery Academy