Los métodos parent() y parent() de jQuery devuelven los elementos que son ancestros del DOM. Atraviesa hacia arriba en el DOM para encontrar antepasados.
En este artículo, aprenderemos sobre la diferencia entre los métodos parent() y parent() .
Método parent(): el método parent() atraviesa solo un nivel antes del DOM y devuelve el elemento que es el padre directo o el primer antepasado más cercano del elemento seleccionado usando jQuery.
Sintaxis:
$('selector').parent();
Ejemplo 1:
HTML
<!DOCTYPE html>
(ancestor-6 )
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
body {
text-align: center;
}
div {
text-align: center;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
margin: 5px;
}
p{
border: 2px solid black;
margin: 2px;
padding: 5px;
background-color: white;
}
/* The class that turns the div's
background colour to red */
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<h1>Geeks For Geeks(ancestor-5)</h1>
<div>
DIV-1(ancestor-4)
<div>
DIV-2(ancestor-3)
<div>
DIV-3(ancestor-2)
<div>
DIV-4 Direct parent of p(ancestor-1)
<p id= 'btn'>
This is geeks for geeks(Click
Me to find direct parent)
</p>
</div>
</div>
</div>
</div>
<script>
$('p').click(function(){
$('p').parent().addClass('bg-blue');
});
</script>
</body>
</html>
Producción:
Padre Directo
Si observamos esto, la clase ‘ bg-blue ‘ se agrega al padre directo de p que es DIV-4 y cambia el color de fondo a azul ya que p tiene un color de fondo blanco, permaneció blanco.
Ejemplo 2: el siguiente código también muestra los elementos principales en color verde para los elementos secundarios.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geeks for Geeks</title>
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
letegrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<style>
h2 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: 100px;
height: 30px;
}
#sublist2 {
color: red;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>
<ul id="list1">
<li>
GrandParent
<ol id="sublist1">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</li>
<li>
Parent
<ol>
<li>three</li>
<li>four</li>
<li>five</li>
<ol id="sublist2">
<li> Child</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
</ol>
</ol>
</li>
</ul>
</div>
<script>
$('ol#sublist2').parent().css('color', 'green');
</script>
</body>
</html>
Salida: La lista ordenada de color verde es el elemento principal para los elementos secundarios.
Método de los padres(): el método de los padres() atraviesa todos los niveles de elementos superiores al elemento seleccionado en el DOM y devuelve todos los elementos que son ancestros del elemento seleccionado usando jQuery.
Sintaxis:
$('selector').parents();
Ejemplo 1:
HTML
<!DOCTYPE html>
(ancestor-6 )
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
body {
text-align: center;
}
div {
text-align: center;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
margin: 5px;
}
p{
border: 2px solid black;
margin: 2px;
padding: 5px;
background-color: white;
}
/* The class that turns the div's background colour to red */
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<h1>Geeks For Geeks(ancestor-5)</h1>
<div>
DIV-1(ancestor-4)
<div>
DIV-2(ancestor-3)
<div>
DIV-3(ancestor-2)
<div>
DIV-4 Direct parent of p(ancestor-1)
<p id= 'btn'>
This is geeks for geeks(Click Me to find all
ancestors of p tag)
</p>
</div>
</div>
</div>
</div>
<script>
$('p').click(function()
{
$('p').parents().addClass('bg-blue');
});
</script>
</body>
</html>
Producción:
todos los antepasados
Si observamos esto, se agrega la clase ‘bg-blue ‘ a todos los ancestros de p que es DIV-4, DIV-3, DIV-2, DIV-1,h1, etiqueta HTML y cambia el color de fondo a azul ya que p tiene un color de fondo blanco, permaneció blanco.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h2 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: 100px;
height: 30px;
}
#sublist2 {
color: red;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div>
<ul id="list1">
<li>
GrandParent
<ol id="sublist1">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</li>
<li>
Parent
<ol>
<li>three</li>
<li>four</li>
<li>five</li>
<ol id="sublist2">
<li> Child</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
</ol>
</ol>
</li>
</ul>
</div>
<script>
$('ol#sublist2').parents().css('color', 'green');
</script>
</body>
</html>
Salida: todas las listas ordenadas de color verde son los padres de los elementos secundarios.
diferencia entre los métodos parent() y parent():
| Solo atraviesa un nivel hacia arriba en el DOM del elemento seleccionado. |
Atraviesa todos los niveles en el DOM del elemento seleccionado hasta la raíz, es decir, la etiqueta HTML. |
| Devuelve solo un elemento que es el padre directo. |
Devuelve todos los elementos que son ancestros del elemento seleccionado. |
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA