Dado un documento HTML y la tarea es obtener la clase principal de un elemento con la ayuda del nombre de clase dado.
Enfoque 1:
- El método on() se usa para seleccionar el controlador de eventos para los elementos seleccionados. Significa que cuando el usuario hace clic en el botón, la función se llama.
- El método más cercano() se usa para devolver el primer antepasado de los elementos seleccionados.
- Compruebe si existe la clase antepasada (principal), luego devuelve el nombre de la clase; de lo contrario, devuelve que no existe.
Ejemplo: este ejemplo usa el método más cercano() para obtener el primer ancestro coincidente del elemento.
<!DOCTYPE html>
<html>
<head>
<title>
How to find a parent class
name with a known class
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child"></div>
</div>
<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() {
var object = $('.child').closest('.parent');
if (object.length) {
$('#GFG_DOWN').text("className = '.child'"
+ " with parentName = '.parent'" + " Exists");
}
else {
$('#GFG_DOWN').text("Not Exists");
}
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- El método on() se usa para seleccionar el controlador de eventos para los elementos seleccionados. Significa que cuando el usuario hace clic en el botón, la función se llama.
- El método parent() se usa para devolver todos los ancestros de los elementos seleccionados.
- Compruebe si existe la clase antepasada (principal), luego devuelve el nombre de la clase; de lo contrario, devuelve que no existe.
Ejemplo: este ejemplo utiliza el método parent() para obtener todos los ancestros coincidentes del elemento.
<!DOCTYPE html>
<html>
<head>
<title>
How to find a parent class
name with a known class
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style=
"font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child"></div>
</div>
<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() {
var object = $('.child').parents('.parent');
if (object.length) {
$('#GFG_DOWN').text("className = '.child'"
+ " with parentName = '.parent'" + " Exists");
}
else {
$('#GFG_DOWN').text("Not Exists");
}
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA