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