Se utiliza para encontrar ancestros de un elemento en el árbol DOM .
Hay diferentes métodos para atravesar el árbol DOM:
- parent(): se utiliza para devolver el elemento padre directo del elemento seleccionado dado.
- parent(): se utiliza para devolver todos los elementos antecesores del elemento seleccionado dado hasta el elemento raíz.
- parentUntil(): se utiliza para devolver todos los elementos ancestros entre dos argumentos dados.
Sintaxis:
$(document).ready(function(){
$("span").parent().css({"color": " ", "border": " "});
});
Ejemplo-1: Mostrando el método parent() .
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgreen;
color: green;
padding: 10px;
margin: 5px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("span").parent().css({
"color": "green",
"border": "4px solid black"
});
});
</script>
</head>
<body class="ancestors">great-great-grandparent
<div style="width:500px;">great-grandparent
<ul>grandparent
<ul>direct parent
<span>
<h1>
<li>
<center>
GeeksforGeeks
</center>
</li>
</h1>
</span>
</ul>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo-2: Mostrando el método parent() .
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgreen;
color: green;
padding: 10px;
margin: 5px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("span").parents().css({
"color": "green",
"border": "4px solid black"
});
});
</script>
</head>
<body class="ancestors">great-great-grandparent
<div style="width:500px;">great-grandparent
<ul>grandparent
<ul>direct parent
<li>
<span>
<h1>
<center>
GeeksforGeeks
</center>
</h1>
</span>
</li>
</ul>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo-3: Mostrando el método parentUntil() .
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgreen;
color: green;
padding: 10px;
margin: 5px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("span").parentsUntil().css({
"color": "green",
"border": "4px solid black"
});
});
</script>
</head>
<body class="ancestors">great-great-grandparent
<div style="width:500px;">great-grandparent
<ul>grandparent
<ul>direct parent
<li>
<span>
<h1>
<center>
GeeksforGeeks
</center>
</h1>
</span>
</li>
</ul>
</ul>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA