JSFiddle - React, Tailwind, and code Playground
by floor_
HTML
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="#">link</a>
</li>
<li>
<a href="#">link</a>
</li>
...
JavaScript
var Traverser = function(root) {
this.parent = root;
this.children = this.parent.childNodes;
this.output = function() {
if(this.children.length > 0) {
for(var i = 0; i < this.children.length; i++) {
console.log(this.children[i]);
if(this.children[i].hasChildNodes()) {
var t = new Traverser(this.children[i]);
t.output();
}
}
}
else{
console.log(this.children);
}
};
}
var root = document.body;
var t = new Traverser(root);
t.output();