La tarea es encontrar el ancestro más cercano del elemento de una clase específica con la ayuda de Javascript puro. Hay dos enfoques que se analizan a continuación.
Enfoque 1: utilice el selector de Javascript para seleccionar el elemento. Use el método más cercano() para obtener el padre más cercano con una clase específica.
Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Find closest ancestor element that has a
specific class using pure JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP">
</p>
<div name = "parentDIV" class="parent">
<div class="child">
</div>
</div>
<button onclick = "myGFG()">
click here
</button>
<p id = "GFG_DOWN">
</p>
<script>
var up = document.getElementById("GFG_UP");
up.innerHTML = "Click on button to see result";
var down = document.getElementById("GFG_DOWN");
function myGFG() {
var el = document.querySelector("div")
.closest(".parent")
down.innerHTML = "Element of name '"
+ el.getAttribute("name")
+ "' is the parent element of specific class.";
}
</script>
</body>
</html>
Producción:
Enfoque 2 : siga avanzando hacia los padres del elemento hasta encontrar la clase específica. Use el método element.className.indexof() para seleccionar el elemento de una clase en particular.
Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Find closest ancestor element that has a
specific class using pure JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP">
</p>
<div name = "parentDIV" class="parent">
<div class="child">
</div>
</div>
<button onclick = "myGFG()">
click here
</button>
<p id = "GFG_DOWN">
</p>
<script>
var up = document.getElementById("GFG_UP");
up.innerHTML = "Click on button to see result";
var down = document.getElementById("GFG_DOWN");
function findParent(el, clas) {
while ((el = el.parentNode) &&
el.className.indexOf(clas) < 0);
return el;
}
function myGFG() {
var el = document.querySelector(".child");
var el = findParent(el, 'parent');
down.innerHTML = "Element of name '"
+ el.getAttribute("name")
+ "' is the parent element of specific class.";
}
</script>
</body>
</html>
Producció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