Kurs jQuery #6 – Poruszanie się po drzewie DOM

Teraz już na pewno wiesz czym jest DOM. Dowiedziałeś się też jak dodawać do niego elementy, zamieniać je na inne, usuwać już istniejące czy dostawać się do wartości i atrybutów. Umiesz nawet tworzyć swoje własne. Czas żebyś nauczył się do tego przemieszczać w strukturze DOM i sprawnie po niej operować. Przyda Ci się to przy określaniu elementów do których dostępu potrzebujesz a co za tym idzie zapewne w każdej innej dziedzinie swojej pracy z jQuery.

Odnoszenie się do elementów rodzica

Każdy element ma rodzica a więc element w którym sam się zawiera. Jeśli chcesz uzyskać do niego dostęp wystarczy skorzystać z funkcji parent().

Odwołujemy się tutaj poprzez element p do diva w którym się znajduje.

Jeśli istnieje taka potrzeba możemy odwołać się do wszystkich przodków elementu aż po html. Służy nam do tego funkcja parents(). Stworzy ona dla nas tablicę z elementami posegregowanymi od tego obejmującego konkretny element po html.

Jeśli nie chcesz dostawać całej takiej wiązanki a jedynie listę elementów do któregoś w górę możesz to określić podając najstarszego przodka do jakiego chcesz uzyskać listę jako argument funkcji parentsUntil(). Dostaniesz taką samą listę jak w przypadku parents() do i bez elementu podanego jako argument.

Odnoszenie się do elementów potomnych

Kiedy mamy znany element rodzica i chcemy odnieść się do jego elementów potomnych mamy do dyspozycji children()find(). Różnica między tymi dwiema funkcjami jest taka, że ta pierwsza odnosi się tylko do elementów będących bezpośrednimi potomkami obiektu a druga do wszystkich które są jego potomkami aż do najniższego rzędu dziedziczenia. Jako argumenty możemy podać im czego dokładnie szukamy tak żeby nie zwracały listy wszystkich elementów ale tylko te na których nam zależy.

Jak również widzisz na przykładzie funkcja find() zawsze musi przyjmować jakiś argument żeby zwrócić listę elementów. Jeśli chcemy żeby to były wszystkie elementy wystarczy dać gwiazdkę.

Odnoszenie się do elementów równorzędnych

jQuery ma również zasób funkcji jeśli chodzi o odnoszenie się do elementów będących na takim samym poziomie struktury DOM. Jeśli chcemy wybrać dosłownie wszystkie elementy otaczające dany element najlepsza będzie do tego funkcja siblings(). Również i w niej możemy określić argumentem jakich konkretnie elementów szukamy.

Jeśli chcemy wybrać wszystkie równorzędne elementy ale tylko znajdujące się po wskazanym przez nas elemencie wybierzemy funkcję nextAll().

Funkcja ta ma również swój odpowiednik wybierający jedynie jeden element następujący po wskazanym przez nas – next():

Pewnym kompromisem pomiędzy tymi dwoma jest natomiast nextUntil(), wybiera wszystkie elementy po wskazanym aż do tego podanego jako argument.

Dokładną odwrotnością trzech ostatnich metod są odpowiednio: prevAll(), prev()prevUntil().

Filtrowanie elementów

Podane teraz funkcję będą w większości odpowiednikami selektorów które nazywały się dokładnie tak samo. Idąc po kolei mamy do dyspozycji funkcję które zwracają odpowiednio pierwszy i ostatni element który znajduje się w elemencie wskazanym przez nas – first() last().

Jeśli masz na stronie kilka elementów takiej samej klasy albo o takim samym tagu możesz się do nich odnieść chociażby po ich indeksie. Służy do tego funkcja eq().

Możemy również filtrować otrzymane przez nas wyniki wyszukiwania konkretnych elementów dzięki funkcji filter(). Przekazujemy do niej jako argument konkretne wymagania co do elementów jakich listę chcemy dostać i wtedy ona przefiltrowuje wyniki otrzymane przez $().

Jej przeciwieństwem jest not() bo zwraca wszystkie elementy które nie pasują do kryteriów podanych jako argument.