Dado un elemento de DOM, la tarea es encontrar el padre de nivel n de ese elemento usando JQuery. A continuación se analizan algunos de los métodos:
- Método jQuery on() :
este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.Sintaxis:
$(selector).on(event, childSel, data, fun, map)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para agregar a los elementos seleccionados.
Si hay varios valores de eventos, sepárelos por espacios. El evento debe ser válido. - childSel: este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
- datos: Este parámetro es opcional. Especifica datos adicionales para pasar a la función.
- diversión: este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
- map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para agregar a los elementos seleccionados.
- jQuery parent() Método :
Este es un método incorporado en jQuery y se usa para encontrar todos los elementos principales relacionados con el elemento seleccionado. Este método atraviesa todos los niveles hasta el elemento seleccionado y devuelve todos los elementos.Sintaxis:
$(selector).parents()
Valor devuelto:
Devuelve todos los padres del elemento seleccionado. - Método jQuery eq() :
este método devuelve un elemento con un número de índice pasado de los elementos coincidentes.
El índice comienza desde 0.Sintaxis:
$(selector).eq(index)
Parámetro:
- índice: Este parámetro es obligatorio. Especifica el índice del elemento. Acepta número positivo o negativo.
Ejemplo 1: Este ejemplo usa el método parent () y eq() para encontrar el padre de nivel 0 del elemento class=’child’ que es un elemento <div> .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Get the n-th level parent of an element.
</title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child">
child
</div>
</div>
<br>
<button>
click here
</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
$('#GFG_UP').text('Click on the button to see result');
$('button').on('click', function() {
$('.child').parents().eq(0).css({
"color": "green",
"border": "2px solid green"
});
$('#GFG_DOWN').text(
"Border drawn around the first parent "+
"of element with class = 'child'");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo utiliza los métodos parent () y eq() para encontrar el elemento principal de segundo nivel del elemento class=’child’ , que es un elemento <body> .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery| Get the n-th level parent of an element.
</title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child">
child
</div>
</div>
<br>
<button>
click here
</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
$('#GFG_UP').text('Click on the button to see result');
$('button').on('click', function() {
$('.child').parents().eq(2).css({
"border": "2px solid green"
});
$('#GFG_DOWN').text(
"Border drawn around the third parent "+
"of element with class = 'child'");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA