JSFiddle - React, Tailwind, and code Playground

by fillano

HTML

<div id="treeview-right" >
        <ul class="k-group k-treeview-lines" role="tree">
            <li role="treeitem" class="k-item k-first">
                <div class="k-top">
                    <span class="k-icon k-i-collapse"></span>
                    <span class="k-in">
                        <span class="Header">常用開發工具</span>
                        <span class="Tag">i:nil=true</span>
                    </span>
                </div>
                <ul class="k-group" role="group" style="display: block;">
                    <li role="treeitem" class="k-item k-last" >
                        <div class="k-bot">
                            <span class="k-icon k-i-collapse"></span>
                            <span class="k-in">
                                <span class="Header">OLAP</span>
                                <span class="Tag">MenuItem_MDP_ManageDQuery</span>
                            </span>
                        </div>
                        <ul class="k-group" role="group" style="display: block;">
                            <li role="treeitem" class="k-item k-last">
                                <div class="k-bot">
                                    <span class="k-in k-state-selected">
                                        <span class="Header">Page</span>
                                        <span class="Tag">MenuItem_MaintainPage</span>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li role="treeitem" class="k-item k-last" >
                <div class="k-bot">
                    <span class="k-in">
                        <span class="Header">個人訊息明細</span>
                        <span class="Tag">MenuItem_CWSMessageList</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>

JavaScript

$(() => {
	parse($('#treeview-right'));
});

function parse(data) {
	$(data).children('ul').each(ul(0));
}

function ul(level) {
	return function (idx, uld) {
		console.log(indent(level, 'ul'));
		$(uld).children('li').each(li(level+1));
	}
}

function li(level) {
	return function (idx, lid) {
		console.log(indent(level, 'li'));
		$(lid).children('div').each(div(level+1));
		$(lid).children('ul').each(ul(level+1));
	}
}

function div(level) {
	return function (idx, divd) {
		console.log(indent(level, 'div'));
		console.log(indent(level, 'Header: ' + $(divd).find('.Header')[0].innerHTML));
		console.log(indent(level, 'Tag: ' + $(divd).find('.Tag')[0].innerHTML));
	}
}

function indent(level, text) {
	return `${'\t'.repeat(level)}${text}`;
}