jQuery - Przechodzenie przez DOM

jQuery to bardzo potężne narzędzie, które zapewnia różnorodne metody przechodzenia przez DOM, które pomagają nam wybierać elementy w dokumencie w sposób losowy, a także sekwencyjny. Większość metod DOM Traversal nie modyfikuje obiektu jQuery i służy do odfiltrowywania elementów z dokumentu na podstawie określonych warunków.

Znajdź elementy według indeksu

Rozważ prosty dokument z następującą zawartością HTML -

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Powyższa lista ma swój własny indeks i można ją zlokalizować bezpośrednio za pomocą eq(index) Metoda, jak na poniższym przykładzie.
Każdy element potomny zaczyna swój indeks od zera, więc do elementu listy 2 można uzyskać dostęp za pomocą$("li").eq(1) i tak dalej.

Przykład

Poniżej znajduje się prosty przykład, który dodaje kolor do drugiej pozycji listy.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Odfiltrowywanie elementów

Plik filter( selector )można użyć do odfiltrowania wszystkich elementów z zestawu dopasowanych elementów, które nie pasują do określonych selektorów. Selektor może być zapisany przy użyciu dowolnej składni selektora.

Przykład

Oto prosty przykład, który stosuje kolor do list związanych z klasą średnią -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Lokalizowanie elementów potomnych

Plik find( selector )można użyć do zlokalizowania wszystkich elementów podrzędnych określonego typu elementów. Selektor może być zapisany przy użyciu dowolnej składni selektora.

Przykład

Poniżej znajduje się przykład, który wybiera wszystkie <span> elementy dostępne w różnych <p> elementach -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

To da następujący wynik -

Metody filtrowania JQuery DOM

Poniższa tabela zawiera przydatne metody, których można użyć do odfiltrowania różnych elementów z listy elementów DOM -

Sr.No.	Metoda i opis
1	eq (indeks) Zmniejsz zestaw dopasowanych elementów do pojedynczego elementu.
2	filtr (selektor) Usuwa wszystkie elementy z zestawu dopasowanych elementów, które nie pasują do określonych selektorów.
3	filtr (fn) Usuwa wszystkie elementy z zestawu dopasowanych elementów, które nie pasują do określonej funkcji.
4	jest (selektor) Sprawdza bieżący wybór względem wyrażenia i zwraca prawdę, jeśli przynajmniej jeden element zaznaczenia pasuje do podanego selektora.
5	mapa (oddzwonienie) Przetłumacz zestaw elementów w obiekcie jQuery na inny zestaw wartości w tablicy jQuery (która może zawierać elementy lub nie).
6	nie (selektor) Usuwa elementy pasujące do określonego selektora z zestawu dopasowanych elementów.
7	plasterek (początek, [koniec]) Wybiera podzbiór dopasowanych elementów.

Metody przechodzenia JQuery DOM

Poniższa tabela zawiera listę innych przydatnych metod, których możesz użyć do zlokalizowania różnych elementów w DOM -

Sr.No.	Metody i opis
1	dodaj (selektor) Dodaje więcej elementów dopasowanych przez dany selektor do zestawu dopasowanych elementów.
2	andSelf () Dodaj poprzednią selekcję do aktualnej selekcji.
3	dzieci ([selector]) Uzyskaj zestaw elementów zawierający wszystkie unikalne bezpośrednie elementy potomne każdego z dopasowanych elementów.
4	najbliższy (selektor) Pobierz zestaw elementów zawierających najbliższy element nadrzędny, który pasuje do określonego selektora, wraz z elementem początkowym.
5	zawartość () Znajdź wszystkie węzły potomne w dopasowanych elementach (w tym węzły tekstowe) lub w dokumencie treści, jeśli element jest ramką iframe.
6	koniec( ) Przywróć ostatnią „destrukcyjną” operację, zmieniając zestaw dopasowanych elementów do poprzedniego stanu.
7	znajdź (selektor) Wyszukuje elementy podrzędne, które pasują do określonych selektorów.
8	next ([selector]) Uzyskaj zestaw elementów zawierający unikalne następne rodzeństwo każdego z podanego zestawu elementów.
9	nextAll ([selector]) Znajdź wszystkie elementy siostrzane po obecnym elemencie.
10	offsetParent () Zwraca kolekcję jQuery z pozycjonowanym elementem nadrzędnym pierwszego dopasowanego elementu.
11	rodzic ([selector]) Pobierz bezpośredniego rodzica elementu. Jeśli zostanie wywołany na zestawie elementów, rodzic zwraca zestaw ich unikalnych bezpośrednich elementów nadrzędnych.
12	rodzice ([selector]) Pobierz zestaw elementów zawierający unikalnych przodków dopasowanego zestawu elementów (z wyjątkiem elementu głównego).
13	prev ([selector]) Uzyskaj zestaw elementów zawierający unikalne poprzednie rodzeństwo każdego z dopasowanego zestawu elementów.
14	prevAll ([selector]) Znajdź wszystkie elementy rodzeństwa przed bieżącym elementem.
15	rodzeństwo ([selector]) Uzyskaj zestaw elementów zawierający wszystkie unikalne rodzeństwo każdego z dopasowanego zestawu elementów.