jQuery - Recorrido de DOM

jQuery es una herramienta muy poderosa que proporciona una variedad de métodos de recorrido DOM para ayudarnos a seleccionar elementos en un documento al azar, así como en un método secuencial. La mayoría de los métodos DOM Traversal no modifican el objeto jQuery y se utilizan para filtrar elementos de un documento en función de determinadas condiciones.

Buscar elementos por índice

Considere un documento simple con el siguiente contenido 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>

Esto producirá el siguiente resultado:

Encima de cada lista tiene su propio índice y se puede ubicar directamente usando eq(index) método como el siguiente ejemplo.
Cada elemento hijo comienza su índice desde cero, por lo tanto, se accedería al elemento de lista 2 usando$("li").eq(1) y así.

Ejemplo

A continuación se muestra un ejemplo simple que agrega el color al segundo elemento de la 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>

Esto producirá el siguiente resultado:

Filtrar elementos

los filter( selector )El método se puede utilizar para filtrar todos los elementos del conjunto de elementos coincidentes que no coinciden con los selectores especificados. El selector se puede escribir utilizando cualquier sintaxis de selector.

Ejemplo

A continuación se muestra un ejemplo simple que aplica color a las listas asociadas con la clase media:

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

Esto producirá el siguiente resultado:

Localización de elementos descendientes

los find( selector )El método se puede utilizar para localizar todos los elementos descendientes de un tipo particular de elementos. El selector se puede escribir utilizando cualquier sintaxis de selector.

Ejemplo

A continuación se muestra un ejemplo que selecciona todos los elementos <span> disponibles 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>

Esto producirá el siguiente resultado:

Métodos de filtro DOM de JQuery

La siguiente tabla enumera métodos útiles que puede utilizar para filtrar varios elementos de una lista de elementos DOM:

No Señor.	Método y descripción
1	eq (índice) Reduzca el conjunto de elementos emparejados a un solo elemento.
2	filtro (selector) Elimina todos los elementos del conjunto de elementos coincidentes que no coinciden con los selectores especificados.
3	filtro (fn) Elimina todos los elementos del conjunto de elementos coincidentes que no coinciden con la función especificada.
4	es (selector) Compara la selección actual con una expresión y devuelve verdadero, si al menos un elemento de la selección se ajusta al selector dado.
5	mapa (devolución de llamada) Convierta un conjunto de elementos en el objeto jQuery en otro conjunto de valores en una matriz jQuery (que puede contener o no elementos).
6	no (selector) Elimina los elementos que coinciden con el selector especificado del conjunto de elementos coincidentes.
7	rebanada (inicio, [final]) Selecciona un subconjunto de elementos coincidentes.

Métodos de desplazamiento de DOM de JQuery

La siguiente tabla enumera otros métodos útiles que puede usar para ubicar varios elementos en un DOM:

No Señor.	Métodos y descripción
1	agregar (selector) Agrega más elementos, emparejados por el selector dado, al conjunto de elementos emparejados.
2	andSelf () Agrega la selección anterior a la selección actual.
3	niños ([selector]) Obtenga un conjunto de elementos que contenga todos los elementos secundarios inmediatos únicos de cada uno de los conjuntos de elementos coincidentes.
4	más cercano (selector) Obtenga un conjunto de elementos que contengan el elemento principal más cercano que coincida con el selector especificado, incluido el elemento inicial.
5	contenido () Busque todos los nodos secundarios dentro de los elementos coincidentes (incluidos los nodos de texto) o el documento de contenido, si el elemento es un iframe.
6	fin( ) Revertir la operación 'destructiva' más reciente, cambiando el conjunto de elementos coincidentes a su estado anterior.
7	buscar (selector) Busca elementos descendientes que coincidan con los selectores especificados.
8	siguiente ([selector]) Obtenga un conjunto de elementos que contengan los próximos hermanos únicos de cada uno del conjunto de elementos dado.
9	nextAll ([selector]) Encuentra todos los elementos hermanos después del elemento actual.
10	offsetParent () Devuelve una colección jQuery con el padre posicionado del primer elemento coincidente.
11	padre ([selector]) Obtiene el padre directo de un elemento. Si se llama a un conjunto de elementos, parent devuelve un conjunto de sus elementos principales directos únicos.
12	padres ([selector]) Obtenga un conjunto de elementos que contengan los antepasados únicos del conjunto de elementos coincidentes (excepto el elemento raíz).
13	prev ([selector]) Obtenga un conjunto de elementos que contengan los hermanos anteriores únicos de cada uno de los conjuntos de elementos coincidentes.
14	prevAll ([selector]) Encuentra todos los elementos hermanos delante del elemento actual.
15	hermanos ([selector]) Obtenga un conjunto de elementos que contenga todos los hermanos únicos de cada uno de los conjuntos de elementos coincidentes.

↰ Previous page Next page ↱