Exemple :
<div someAttr="parentDiv. We need to get it from child.">
<table>
...
<td> <div id="myDiv"></div> </td>
...
</table>
</div>Je veux obtenir le parent par un sélecteur quelconque à partir de l'élément div interne (celui avec l'élément myDiv classe).
Comment puis-je réaliser cela avec du simple JavaScript, sans jQuery ?
Quelque chose comme :
var div = document.getElementById('myDiv');
div.someParentFindMethod('some selector');
Il s'agit d'utiliser ce dont Leech a parlé, mais en le faisant fonctionner pour IE (IE ne supporte pas les correspondances) :
function closest(el, selector, stopSelector) {
var retval = null;
while (el) {
if (el.className.indexOf(selector) > -1) {
retval = el;
break
} else if (stopSelector && el.className.indexOf(stopSelector) > -1) {
break
}
el = el.parentElement;
}
return retval;
}Ce n'est pas parfait, mais cela fonctionne si le sélecteur est suffisamment unique pour ne pas correspondre accidentellement à un élément incorrect.
Voici une solution récursive :
function closest(el, selector, stopSelector) {
if(!el || !el.parentElement) return null
else if(stopSelector && el.parentElement.matches(stopSelector)) return null
else if(el.parentElement.matches(selector)) return el.parentElement
else return closest(el.parentElement, selector, stopSelector)
}
J'ai pensé fournir un exemple beaucoup plus robuste, également en typescript, mais qui serait facile à convertir en pur javascript. Cette fonction interroge les parents en utilisant soit l'ID comme "#my-element" ou la classe ".my-class" et contrairement à certaines de ces réponses, elle gère plusieurs classes. J'ai trouvé que j'ai nommé certains éléments de manière similaire et donc les exemples ci-dessus trouvaient les mauvaises choses.
function queryParentElement(el:HTMLElement | null, selector:string) {
let isIDSelector = selector.indexOf("#") === 0
if (selector.indexOf('.') === 0 || selector.indexOf('#') === 0) {
selector = selector.slice(1)
}
while (el) {
if (isIDSelector) {
if (el.id === selector) {
return el
}
}
else if (el.classList.contains(selector)) {
return el;
}
el = el.parentElement;
}
return null;
}let elementByClassName = queryParentElement(someElement,".my-class")
let elementByID = queryParentElement(someElement,"#my-element")
Exemple simple d'une fonction parent_by_selector qui retourne un parent ou null (aucun sélecteur ne correspond) :
function parent_by_selector(node, selector, stop_selector = 'body') {
var parent = node.parentNode;
while (true) {
if (parent.matches(stop_selector)) break;
if (parent.matches(selector)) break;
parent = parent.parentNode; // get upper parent and check again
}
if (parent.matches(stop_selector)) parent = null; // when parent is a tag 'body' -> parent not found
return parent;
};
Voici un moyen simple d'accéder à l'identifiant du parent
document.getElementById("child1").parentNode;fera la magie pour vous pour accéder à la division parent.
<html>
<head>
</head>
<body id="body">
<script>
function alertAncestorsUntilID() {
var a = document.getElementById("child").parentNode;
alert(a.id);
}
</script>
<div id="master">
Master
<div id="child">Child</div>
</div>
<script>
alertAncestorsUntilID();
</script>
</body>
</html> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
