Tengo una estructura HTML como la siguiente. Esta estructura es una lista anidada.
<ul id="u0"> <li id="l1"> <a id="a1"></a> <ul id="u1"> <li id="l2"> <a id="a2"></a> </li> <li id="l3"> <a id="a3"></a> <ul id="u2"> <li id="l4"> <a id="a4"></a> </li> </ul> </li> </ul> </li> </ul> y buscando una función JS para identificar si un elemento está en una rama específica. Por ejemplo, si se supone que la función es function(id1,id2)
function('a4','l4') return true (a4 is a child of l4) function ('a4','l2') returns false (a4 is not a child of l2) function('a4','l1') returns true (a4 is a child of l1) lo que he hecho es usar children() e iterar los resultados, pero esto no funcionó. Tengo la sensación de que la respuesta es muy corta y estoy complicando demasiado una pregunta simple.
Puede usar querySelector para consultar el padre, el hijo y convertir el resultado en un valor booleano:
const contains = (childId, parentId) => { return !!document.querySelector(`#${parentId}`).querySelector(`#${childId}`); } console.log(contains('a4', 'l4')) // return true (a4 is a child of l4) console.log(contains('a4', 'l2')) // returns false (a4 is not a child of l2) console.log(contains('a4', 'l1')) // returns true (a4 is a child of l1) <ul id="u0"> <li id="l1"> <a id="a1"></a> <ul id="u1"> <li id="l2"> <a id="a2"></a> </li> <li id="l3"> <a id="a3"></a> <ul id="u2"> <li id="l4"> <a id="a4"></a> </li> </ul> </li> </ul> </li> </ul>Simplemente puede usar el método Node.contains() :
const foo = (id1, id2)=>{ return document.getElementById(id2).contains(document.getElementById(id1)) } console.log(foo('a4','l4')) console.log(foo('a4','l2')) console.log(foo('a4','l1')) <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"></div> <ul id="u0"> <li id="l1"> <a id="a1"></a> <ul id="u1"> <li id="l2"> <a id="a2"></a> </li> <li id="l3"> <a id="a3"></a> <ul id="u2"> <li id="l4"> <a id="a4"></a> </li> </ul> </li> </ul> </li> </ul> </body> </html>function isChild(childId, parentId) { let c = document.getElementById(childId); let parentElement = c.parentNode; while (parentElement) { if (parentElement.id === parentId) { return true; } parentElement = parentElement.parentNode; } return false; }