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.