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