Atravesar jQuery significa moverse a través de los elementos vinculados en una página HTML . Usando jQuery traversing, podemos buscar y encontrar diferentes elementos basados en la relación de los elementos. Los elementos pueden ser padres, hermanos, hijos, etc.
Podemos movernos hacia arriba (antepasados), hacia abajo (descendientes) y hacia los lados (hermanos). Podemos ver un DOM en el siguiente diagrama. Es solo para demostrar cómo funciona DOM y no es perfecto. Comenzando desde cualquier elemento en el DOM, podemos llegar a cualquier elemento en el DOM porque cada elemento es un descendiente de HTML que es parte del recorrido.
DOM
Las siguientes cosas se pueden concluir a partir de la ilustración anterior.
- El <html> es el elemento raíz.
- El <header> , <div> y <footer> son los elementos secundarios del elemento <html>.
- El <nav> es el hijo de <header> que a su vez es padre de tres elementos <li>.
- Nuevamente, el elemento <div>, el hermano de <header> es el antepasado de <h1> y dos <p> .
- El <footer> es el sucesor de <html>, que es el antepasado de <p> y <a> .
Atravesar hacia arriba: Atravesar el DOM significa moverse hacia los padres o antepasados. Los siguientes tres métodos se utilizan para recorrer hacia arriba en jQuery.
Método jQuery parent() : este método se utiliza para obtener el padre más cercano para el elemento que estamos buscando. El siguiente es un ejemplo donde estamos encontrando el padre de <li> que es <ul>. Usamos la función parent() de CSS para obtener el padre directo. <ul> es el padre directo de ambos elementos <li>.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h4>Welcome to GeeksforGeeks</h4>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
</ul>
</div>
<script>
$("li").parent().css({
"color": "green",
"margin": "2rem",
"border": "2px solid green"
})
</script>
</body>
</html>
Producción:
Método jQuery parent() : este método se usa para obtener todos los ancestros hasta la raíz del documento que es el <html> . En el siguiente ejemplo, tenemos un árbol anidado de elementos y aplicaremos un estilo a todos los ancestros del elemento <li> que tiene la identificación de «último hijo».
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h4>Welcome to GeeksforGeeks</h4>
<ul>
<li>
Data Structures
<ul>
<li id="lastchild">Array</li>
<li>Struct</li>
<li>Queue</li>
<li>Linked List</li>
</ul>
</li>
<li>
Algorithms
<ul>
<li>Searching</li>
<li>Sorting</li>
<li>Backtracking</li>
</ul>
</li>
</ul>
</div>
<script>
$('#lastchild').parents().css({
"margin": ".2rem",
"border": "2px solid green"
})
</script>
</body>
</html>
Producción:
Método jQuery parentUntil() : este método de jQuery se usa para obtener los padres que están hasta el elemento declarado solamente. El siguiente ejemplo tiene un div HTML que tiene una lista de elementos. Queremos el estilo hasta el primer <ul> que tenga la identificación de «padre final» a partir de la identificación «último hijo» del elemento <li>.
Entonces, el borde y el margen deben aplicarse a dos elementos. primero el padre directo del <ul> y luego el <li> .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h4>Welcome to GeeksforGeeks</h4>
<ul id="finalparent">
<li>
Data Structures
<ul>
<li id="lastchild">Array</li>
<li>Struct</li>
<li>Queue</li>
<li>Linked List</li>
</ul>
</li>
<li>
Algorithms
<ul>
<li>Searching</li>
<li>Sorting</li>
<li>Backtracking</li>
</ul>
</li>
</ul>
</div>
<script>
$('#lastchild').parentsUntil("#finalparent").css({
"margin": ".2rem",
"border": "2px solid green"
})
</script>
</body>
</html>
Producción:
Atravesar hacia abajo : Atravesar hacia abajo significa que queremos llegar a los descendientes de los elementos ancestros. El descendiente puede ser el hijo directo o un hijo anidado. Podemos encontrar los diferentes descendientes en jQuery usando las siguientes dos funciones.
Método jQuery children() : Usando esta función jQuery, podemos acceder a todos los hijos directos del elemento. Los hijos directos significan los elementos justo dentro del elemento y no los elementos más anidados.
El siguiente es un ejemplo donde el elemento <div> tiene tres párrafos <p> . El resultado tendrá todos los párrafos con un borde verde.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<p>GeeksforGeeks is a coding and development tutorial website.</p>
<p>We can also find tutorials for Machine Learning and IOT.</p>
<p>Almost all of the resources on GeeksforGeeks is for free.</p>
</div>
<script>
$('div').children().css({
"margin": "1rem",
"border": "2px dotted green"
})
</script>
</body>
</html>
Producción:
Método jQuery find() : En esta función. pasamos el nombre, id o nombre de clase del elemento que es el hijo directo o indirecto del elemento. En este ejemplo, queremos encontrar elelemento <li> que tiene la identificación de «lastchild», que es el descendiente indirecto de <div> .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<p>
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>
We can also find tutorials for
Machine Learning and IOT.
</p>
<p>
Almost all of the resources on
GeeksforGeeks is for free.
</p>
<ul>
<li>Algorithms</li>
<li id="lastchild">Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('div').find("#lastchild").css({
"padding": ".5rem",
"margin": "1rem",
"border": "5px solid green"
})
</script>
</body>
</html>
Producción:
Hermanos que atraviesan : Los hermanos pueden estar relacionados con hermanos y hermanas. Supongamos que los elementos de la lista de la lista desordenada son todos hermanos. Podemos usar las siguientes funciones para encontrar a los hermanos en jQuery.
- Método jQuery hermanos()
- Método jQuery next()
- Método jQuery nextAll()
- Método jQuery nextUntil()
- Método jQuery anterior()
- Método jQuery prevAll()
- método jQuery prevUntil()
Método jQuery brothers() : este método se usa para encontrar todos los elementos laterales donde está arriba o debajo, excepto el elemento en sí. Este método encuentra todos los hermanos de la etiqueta <h3> y para identificar los elementos, se aplica un CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p>
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>
We can also find tutorials for
Machine Learning and IOT.
</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('h3').siblings().css({
"margin": "1rem",
"border": "5px solid green"
})
</script>
</body>
</html>
Producción:
Método jQuery next() : este método se usa para encontrar el siguiente elemento hermano. En el siguiente ejemplo, estamos encontrando el elemento al lado del <h3> que es el primer elemento <p>.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p>
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>
We can also find tutorials for
Machine Learning and IOT.
</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('h3').next().css({
"margin": "1rem",
"border": "5px solid green"
})
</script>
</body>
</html>
Producción:
Método jQuery nextAll() : este método es muy similar al método next() pero encuentra todos los elementos al lado del elemento que queremos encontrar. En el siguiente ejemplo, queremos encontrar los elementos al lado del elemento <p> que tiene una id .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p>GeeksforGeeks is a coding and development tutorial website.</p>
<p id="paragraph">
We can also find tutorials for Machine Learning and IOT.
</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('#paragraph').nextAll().css({"margin": "1rem",
"border": "5px solid green"})
</script>
</body>
</html>
Producción:
Método jQuery nextUntil() : este método se usa para encontrar los elementos hermanos hasta que el elemento se especifica o se pasa a esta función. En este ejemplo, estamos comenzando desde el primer elemento <p> y nos moveremos hasta el <ul> .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p id="paragraph">
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>We can also find tutorials for Machine Learning and IOT.</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('#paragraph').nextUntil("ul").css({"margin": "1rem",
"border": "5px solid green"})
</script>
</body>
</html>
Producción:
Método jQuery prev() : La función prev() encuentra el elemento que está antes o encima del elemento actual. Ambos elementos son hermanos. Encuentra el elemento anterior a ello. Así que usamos esta función en el siguiente ejemplo para encontrar el elemento anterior al elemento <p> que tiene una identificación .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p id="paragraph">
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>
We can also find tutorials for
Machine Learning and IOT.
</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('#paragraph').prev().css({"margin": "1rem",
"border": "5px solid green"})
</script>
</body>
</html>
Salida :
Método jQuery prevAll() : esta función se utiliza para encontrar todos los elementos que son hermanos y anteriores al elemento actual. Este método es similar a la función nextAll() . En el siguiente ejemplo, estamos buscando los elementos antes del elemento <ul> .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p>
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>
We can also find tutorials for
Machine Learning and IOT.
</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('ul').prevAll().css({"margin": "1rem",
"border": "5px solid green"})
</script>
</body>
</html>
Método jQuery prevUntil(): esta función encuentra todos los elementos anteriores al elemento actual hasta el elemento especificado. En el siguiente ejemplo, queremos encontrar todos los elementos anteriores de <ul> hasta el elemento <h3>. El <h3> no se incluirá.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div>
<h3>Welcome to GeeksforGeeks</h3>
<p>
GeeksforGeeks is a coding and
development tutorial website.
</p>
<p>
We can also find tutorials for
Machine Learning and IOT.
</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Machine Learning</li>
</ul>
</div>
<script>
$('ul').prevUntil('h3').css({"margin": "1rem",
"border": "5px solid green"})
</script>
</body>
</html>
Salida :
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA