jQuery - DOM Traversing

jQuery é uma ferramenta muito poderosa que fornece uma variedade de métodos de travessia de DOM para nos ajudar a selecionar elementos em um documento aleatoriamente, bem como no método sequencial. A maioria dos métodos DOM Traversal não modifica o objeto jQuery e são usados para filtrar elementos de um documento com base em determinadas condições.

Encontrar elementos por índice

Considere um documento simples com o seguinte conteúdo 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>

Isso produzirá o seguinte resultado -

Acima, cada lista tem seu próprio índice e pode ser localizada diretamente usando eq(index) método conforme o exemplo abaixo.
Cada elemento filho inicia seu índice do zero, portanto, o item da lista 2 seria acessado usando$("li").eq(1) e assim por diante.

Exemplo

A seguir está um exemplo simples que adiciona a cor ao segundo item da lista.

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

Isso produzirá o seguinte resultado -

Filtrando Elementos

o filter( selector )método pode ser usado para filtrar todos os elementos do conjunto de elementos correspondentes que não correspondem ao (s) seletor (es) especificado (s). O seletor pode ser escrito usando qualquer sintaxe de seletor.

Exemplo

A seguir está um exemplo simples que aplica cor às listas associadas à classe média -

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

Isso produzirá o seguinte resultado -

Localizando Elementos Descendentes

o find( selector )O método pode ser usado para localizar todos os elementos descendentes de um determinado tipo de elementos. O seletor pode ser escrito usando qualquer sintaxe de seletor.

Exemplo

A seguir está um exemplo que seleciona todos os elementos <span> disponíveis dentro de diferentes elementos <p> -

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

Isso produzirá o seguinte resultado -

Métodos de filtro JQuery DOM

A tabela a seguir lista métodos úteis que você pode usar para filtrar vários elementos de uma lista de elementos DOM -

Sr. Não.	Método e Descrição
1	eq (índice) Reduza o conjunto de elementos correspondentes a um único elemento.
2	filtro (seletor) Remove todos os elementos do conjunto de elementos correspondentes que não correspondem ao (s) seletor (es) especificado (s).
3	filtro (fn) Remove todos os elementos do conjunto de elementos correspondentes que não correspondem à função especificada.
4	é (seletor) Compara a seleção atual com uma expressão e retorna verdadeiro, se pelo menos um elemento da seleção se encaixa no seletor fornecido.
5	mapa (retorno de chamada) Traduzir um conjunto de elementos no objeto jQuery para outro conjunto de valores em um array jQuery (que pode ou não conter elementos).
6	não (seletor) Remove os elementos correspondentes ao seletor especificado do conjunto de elementos correspondentes.
7	fatia (início, [fim]) Seleciona um subconjunto dos elementos correspondentes.

Métodos JQuery DOM Traversing

A tabela a seguir lista outros métodos úteis que você pode usar para localizar vários elementos em um DOM -

Sr. Não.	Métodos e Descrição
1	adicionar (seletor) Adiciona mais elementos, correspondidos pelo seletor fornecido, ao conjunto de elementos correspondidos.
2	andSelf () Adicione a seleção anterior à seleção atual.
3	filhos ([seletor]) Obtenha um conjunto de elementos contendo todos os filhos imediatos exclusivos de cada um dos conjuntos de elementos correspondentes.
4	mais próximo (seletor) Obtenha um conjunto de elementos contendo o elemento pai mais próximo que corresponda ao seletor especificado, incluindo o elemento inicial.
5	conteúdo () Encontre todos os nós filhos dentro dos elementos correspondentes (incluindo nós de texto) ou o documento de conteúdo, se o elemento for um iframe.
6	fim( ) Reverta a operação 'destrutiva' mais recente, alterando o conjunto de elementos correspondentes ao estado anterior.
7	find (seletor) Pesquisa por elementos descendentes que correspondam aos seletores especificados.
8	próximo ([seletor]) Obtenha um conjunto de elementos contendo os próximos irmãos exclusivos de cada um dos conjuntos de elementos fornecidos.
9	nextAll ([seletor]) Encontre todos os elementos irmãos após o elemento atual.
10	offsetParent () Retorna uma coleção jQuery com o pai posicionado do primeiro elemento correspondente.
11	pai ([seletor]) Obtenha o pai direto de um elemento. Se chamado em um conjunto de elementos, parent retorna um conjunto de seus elementos pais diretos exclusivos.
12	pais ([seletor]) Obtenha um conjunto de elementos contendo os ancestrais exclusivos do conjunto de elementos correspondentes (exceto para o elemento raiz).
13	prev ([seletor]) Obtenha um conjunto de elementos contendo os irmãos anteriores exclusivos de cada um dos conjuntos de elementos correspondentes.
14	prevAll ([seletor]) Encontre todos os elementos irmãos na frente do elemento atual.
15	irmãos ([seletor]) Obtenha um conjunto de elementos contendo todos os irmãos exclusivos de cada um dos conjuntos de elementos correspondentes.