Issue
This is my html element:
<div class="child-elements-container">
<div id="116" is-open="true">
<div class="element">
</div>
<div class="child-elements-container"></div>
</div>
<div id="105" is-open="true" draggable="false">
<div class="element">
</div>
<div class="child-elements-container">
<div id="4" is-open="true">
<div class="element">
</div>
<div class="child-elements-container"></div>
</div>
</div>
</div>
</div>
which is this:
var movedElement = document.getElementById(movedElementId);
console.log(movedElement.parentElement)
I have an id number 4 which is movedElementId and with this, I want to reach ID 105.
So I would like to push 's ID'd to an array as an object that includes id and children. Something like this:
[
{ id: 116, children: {} },
{ id: 105, children: { id: 4, children: {} } }
]
Can you help me with this?
Solution
Here is a quick recursive function that extracts your wanted data from the html.
const getChildren = (el) => {
let kids = [...el.querySelectorAll(":scope>div")];
let output = kids.map(k => {
return {
id: k.id,
children: getChildren(k.querySelector(".child-elements-container"))
}
});
return output;
};
let root = document.querySelector(".child-elements-container");
let out = getChildren(root);
console.log(out);
<div class="child-elements-container">
<div id="116" is-open="true">
<div class="element">
</div>
<div class="child-elements-container"></div>
</div>
<div id="105" is-open="true" draggable="false">
<div class="element">
</div>
<div class="child-elements-container">
<div id="4" is-open="true">
<div class="element">
</div>
<div class="child-elements-container"></div>
</div>
</div>
</div>
</div>
Answered By - James
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.