Jak filtrować elementy HTML w jQuery

JQuery to biblioteka JavaScript z łatwiejszą do nauczania składni. Podobnie jak jego język nadrzędny JS, JQuery można również zintegrować z HTML w celu wykonywania różnych operacji. JQuery zapewnia obsługę filtrowania elementów HTML przy użyciu różnych metod, które obejmują najpierw (), last (), eq (), slice (), filtr (), ma () i not () metody. Niniejszy przewodnik zapewnia filtrowanie elementów HTML w JQuery i zapewnia następujące wyniki uczenia się.

• Praca ze wszystkich metod filtrowania elementów HTML w jQuery
• użycie każdej metody (z przykładami)

Jak filtrować elementy HTML w jQuery

W tej sekcji poprawiono działanie różnych metod filtrowania elementów HTML w jQuery.

Jak użyć metody pierwszej ()

First () metoda filtruje elementy na podstawie pewnych warunków i zwraca pierwszy element z dopasowanych elementów. Składnia metody pierwszej () jest wyświetlana poniżej:

$ („selector”).Pierwszy();

Przykład

W powyższym kodzie,

• First () metoda jest stosowana na selector = ”P"
• Metoda addClass () jest stosowana w celu odróżnienia elementu filtrowanego

Wyjście

Wyjście pokazuje, że wybrano tylko pierwszy akapit, a jego tło jest zmieniane za pomocą „Pierwszy" klasa.

Jak użyć metody ostatniej ()

Ta metoda zwraca ostatni element z zestawu dopasowanych elementów. Działa na następującej składni:

$ („selector”).ostatni();

Przykład

Powyższy kod praktykuje metodę ostatniej () w elemencie akapitowym i jQuery addClass () Metoda jest dodawana do osadzania klasy CSS.

Notatka: Celem klasy CSS jest podkreślenie dopasowanego elementu.

Wyjście

Jak używać metody eq ()

Metoda eq () zwraca element pasujący do numeru indeksu elementu. Ta metoda wykorzystuje następującą składnię

$ („selector”).eq ();

Metoda eq () akceptuje wartości liczbowe dodatnie lub ujemne. Wartość dodatnia zaczyna się liczyć z elementów początkowych (lub górnych), podczas gdy wskaźnik wartości ujemnej zaczyna się liczyć od dolnego końca.

Przykład

Poniższy przykład praktykuje metodę eq () w indeksach pozytywnych i ujemnych.

Kod opisano poniżej,

• Eq (3) używa dodatniego numeru indeksu i css class = ”pozytywny”Jest związany z metodą równania (3).
• Eq (-3) używa negatywnego numeru indeksu i css class = ”negatywny”Jest wykonywane, gdy eq (-3) jest wykonywane.

Wyjście

Z powyższego wyjścia, Eq (3) pobiera Ostatni akapit (tak jak jest w indeksie = 3) i Eq (-3) filtry Trzeci element od dołu (zero jest zarezerwowany dla pierwszego elementu, a -1 jest dla ostatniego elementu).

Jak użyć metody slice ()

Metoda wycinka zwraca określony zakres (zdefiniowany przez indeksy) elementów. Aby użyć metody slice (), praktykowana jest następująca składnia:

$ („selector”).Pokrój (start, stop);

Metoda slice () akceptuje dodatnią lub ujemną wartość liczbową jako kryteria początkowe/stopu

• początek: Początek krojenia jest określany przez ten parametr
• Stop (opcjonalnie): Ten parametr zatrzymuje krojenie przed osiągnięciem określonego numeru indeksu
• Pozytywny numer indeksu: Pozytywne indeksowanie rozpoczyna wybór elementów z najwyższego rzędu.
• Numer indeksu ujemnego: Numer indeksu ujemnego zaczyna wybierać Elemetns od dolnego rzędu.

Przykład 1: Korzystanie z numeru indeksu dodatniego

Powyższy kod jest opisany jako,

• „„P”Reprezentuje akapity używane dla„plasterek()" metoda
• „„Pokrój (0,2)”Pokazuje, że krojenie rozpocznie się od 0. indeksu i zatrzyma się przed 2. indeksem
• ADDCLASS („pozytywny„) Metoda doda„pozytywny”Klasa na wybranych elementach.

Wyjście

Przykład 2: Korzystanie z negatywnego numeru indeksu

Poniższy kod praktykuje negatywną liczbę indeksu w metodzie slice ()

• Pokrój (-2, -1) jest stosowany do akapitów i zacząłby się od drugiego ostatniego elementu i końców przed ostatnim elementem.
• ADDCLASS („negatywny„) Dodanie„negatywny„Klasa do pokrojonych elementów.

Wyjście

Jak użyć metody Filter ()

Metoda Filter () zwraca elementy, które pasują do określonych kryteriów. Składnia tej metody podano poniżej:

$ („selector”).filtr (kryteria, funkcja (indeks));

kryteria Parametr jest ustawiony na wybrane elementy i Funkcja (indeks) parametr jest opcjonalnie (ćwiczenie, gdy określony element ma zostać pobrany z wyboru za pomocą indeksu).

Przykład

Poniższy kod praktykuje metodę Filter () do pobierania dwóch akapitów za pomocą ich nazw id i klas.

Powyższy kod wybiera tylko te akapity, które mają klasę = ”P1”I id =”P2".

Wyjście

Jak używać metody not ()

Metoda not () spowodowałaby powrót elementów, które nie znajdują się w kryteriach pasujących. Lub można powiedzieć, że jest to przeciwieństwo Metoda filtra (). Składnia not () podano poniżej:

$ („selector”).nie (kryteria, funkcja (indeks));

Przykład

W powyższym kodzie,

• dwie klasy "P1" I "P2”Są przekazywane do metody not ()
• addclass („nie”) służy do pokolorowania wyboru dokonanego przez nie() metoda

Wyjście

Jak używać metody ma ()

Metoda HAS () jest praktykowana, aby uzyskać element, który ma elementy gałęzi. Składnia tej metody podano poniżej:

$ („selector”).ma („element”);

W powyższej składni „„selektor”To zawiera„element”Byłby tylko odzyskany.

Przykład

W celu lepszego zrozumienia metody HAS () wykonywana jest następujący kod.

Powyższy kod śledzi, które „div„Tag, który ma„ustęp" element. Dodatkowo css class = ”ma”Służy do pokazania wybranych„div”Tag.

Wyjście

Powyższe wyjście pokazuje, że div zawierające akapity są wybierane tylko i to div jest zabarwiony leśnym zielonym kolorem.

Wniosek

JQuery obsługuje różne metody, takie jak fert (), last (), eq (), not (), ma (), slice () itp., Aby filtrować elementy HTML. Ten przewodnik zawiera działanie i wykorzystanie każdej metody jeden po drugim. Każda metoda następuje po innym filtrowaniu, aby wybrać kilka elementów. Na przykład metody eq () i slice () używają numerów indeksu, podczas gdy inne metody używają klasy lub identyfikatora (elementu) do filtrowania elementów HTML.