Element wyszukiwania JavaScript

| | |

Metoda znajdź () jQuery może brzmieć znajomo, ale nie pomyl jej z metodą znajdź () języka JavaScript! „Znajdź” rzeczy, ale to, co one zwrot może być bardzo różny. W JavaScript metoda find() może być wywołana tylko na tablicy.

Wymaga funkcji zwrotnej, która jest funkcją przekazaną do metody jako argument, zadzwonić później. Znajduje i zwraca pierwszy element, który spełnia wymagania opisane w funkcji zwrotnej.

Metoda find() jQuery jest zupełnie inna. Jak wszystkie metody jQuery, jest wywoływana na selektorze. Szukaj w tym selektorze i manipuluj tylko elementami podrzędnymi tego selektora. Ten wysoki poziom manipulacji jest przydatny, jeśli chcesz zmodyfikować niektóre elementy, a nie inne, które są zawarte w tym samym elemencie nadrzędnym.

Korzystanie z jQuery find()

Teraz znamy jQuery find() służy do wybrania wszystkich elementów podrzędnych danego selektora. Sprawdź kilka przykładów kodu, aby zobaczyć, jak używać jQuery find().

Zacznijmy prosto i dodaj trochę złożoności w poniższych sekcjach. Możemy manipulować elementem po załadowaniu strony, aby zademonstrować, jak działa find(). Co powiesz na zmianę koloru niektórych słów w kontekście akapitu po załadowaniu strony? Zaczniemy od tego miejsca:

Każde inne słowo pozostanie takie samo.

Spójrz na ten kod, a zauważysz wewnątrz

kilka elementy . Jeden z elementów jest dzieckiem elementu

. Drugi jest dzieckiem

< Klasa face = "wp-image-block"> „IR3bnpJdRzIwsq teraz zmień kolory tekstu ilustrujące działanie znajdź (). To świetny krok dla początkujących, ponieważ w tym celu wystarczy zmodyfikować jeden atrybut CSS. Przekazywanie elementu

jako selektora do find(), możemy użyć metody css() jQuery, aby dokonać zmian koloru:

Przy pierwszym użyciu find() zaznaczamy wszystkie elementy

. Używamy find(), aby znaleźć wszystkie elementy , które są dziećmi

. W tym przykładzie jest to tylko słowo niebieski. Następnie używamy metody css(), aby zmienić kolor na niebieski.

Przy drugim użyciu find().Tym razem wybieramy .

Ponownie jest to tylko zielone słowo.Jeśli chodzi o pierwszą linię, używamy css ( ), aby zmienić kolor na zielony.

Uruchommy go i zobaczmy, co się stanie!

X NmmVK1C Z30uO5sa15iVH9aCEO ASkwA4cuqwxOagZqMkO8QpJd AlJeZH2NXXSALKH8lWknoNiwXquCqxMuztLiG CL0FzyoN60rr OR3aktZVCcmRgyHPk7Fd7hsjGON74Pi

Należy zauważyć, że niebieskie i g słowa reen zostały zawarte w elemencie span bez przypisanej klasy lub identyfikatora. Udało nam się ponownie wyizolować te słowa i zmienić ich kolor. Jak można się domyślić, dzieje się tak dlatego, że główne elementy są różne.

jest rodzicem niebieskiego słowa. jest elementem nadrzędnym elementu zawierającego słowo green.

Stało się tak, ponieważ find () znajduje elementy potomne elementów używanych jako selektor. Dodajmy trochę złożoności i spójrz na przykładową listę rzeczy do zrobienia.

jQuery znajdź () na liście

W tym przykładzie mamy listę rzeczy do zrobienia. dzisiaj, ale musimy też kupować rzeczy w sklepie, aby to zrobić. Gdy już kupimy te przedmioty, możemy je usunąć z listy i ruszyć dalej! Oto nasza lista:

Tu mamy naszą listę. Mamy

  • ; elementy „Idź do sklepu”, „Wynieś śmieci” i „Zmyj naczynia” jako dzieci elementu