El padre() El método en jQuery encuentra el padre directo del selector dado. Es una función incorporada en jQuery. Este método solo recorre un nivel superior en el árbol DOM y devuelve el padre directo del elemento seleccionado.
El padre() método es similar al padres() método, ya que ambos viajan hasta el árbol DOM y devuelven el elemento principal. Pero la diferencia es que el padres() El método atraviesa varios niveles en el árbol DOM y devuelve todos los antepasados, incluidos un abuelo, un bisabuelo, etc. del selector dado, mientras que el padre() El método recorre un solo nivel hacia arriba y solo devuelve el padre directo del selector dado.
Sintaxis
$(selector).parent(filter)
El selector en la sintaxis anterior representa el elemento seleccionado cuyo padre se va a buscar. El filtrar en la sintaxis anterior está el parámetro opcional que especifica la expresión del selector, que se utiliza para limitar la búsqueda.
Ejemplo 1
En este ejemplo, no estamos utilizando el parámetro opcional del padre() método. Aquí hay un elemento div que contiene un ul elemento, un título h2 y un elemento de párrafo.
Estamos aplicando el padre() Método para buscar el padre del encabezado h2. Si utilizamos el padres() método en lugar de utilizar el padre() método, se resaltarán todos los antepasados del encabezado h2, incluido el elemento del cuerpo.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me Pruébalo ahora Producción:
Después de la ejecución del código anterior, el resultado será:
Después de hacer clic en el botón indicado, el resultado será:
Ejemplo2
En este ejemplo estamos usando el parámetro opcional del padre() Método para encontrar el padre del elemento del primer párrafo. Aquí hay más de un elemento de párrafo, pero tenemos que encontrar el padre del primer elemento de párrafo. Entonces, pasamos el pseudoselector ( :primero ) como el valor opcional de la padre() método.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me Después de la ejecución del código anterior, el resultado será:
Después de hacer clic en el botón indicado, el resultado será:
Ejemplo3
En este ejemplo estamos usando el parámetro opcional del padre() Método para encontrar el padre específico del selector dado. Aquí hay tres elementos de párrafo con padres diferentes. Estamos encontrando el h2 padre del elemento de párrafo. Entonces, para lograr lo mismo tenemos que pasar el h2 como el valor opcional de la padre() método.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me Pruébalo ahora Producción:
Después de la ejecución del código anterior, el resultado será:
Después de hacer clic en el botón indicado, el resultado será:
