将动态 DOM 结构转换为 JSON

Question

如何将下面的 DOM 转换为 JSON 数组，这将在未来有更多的叶子。我已经尝试了很多，但没有得到任何解决方案。我找到了this，但在我的情况下这是不可能的。

HTML 代码

 <ul id="org1">
        <li>
            Main
            <ul data-self="1">
                <li data-self="2" data-parent="1">A
                    <ul data-self="2">
                        <li data-self="5" data-parent="2">A1</li>
                        <li data-self="6" data-parent="2">A2</li>
                        <li data-self="7" data-parent="2">A3</li>
                        <li data-self="8" data-parent="2">A4</li>
                        <li data-self="9" data-parent="2">A5</li>
                        <li data-self="10" data-parent="2">A6</li>
                    </ul>
                </li>
                <li data-self="3" data-parent="1">B
                    <ul data-self="3">
                        <li data-self="11" data-parent="3">B1</li>
                        <li data-self="12" data-parent="3">B2</li>
                        <li data-self="13" data-parent="3">B3</li>
                        <li data-self="14" data-parent="3">B4</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

JSON 要求是

{
  1:{
      2:{5,6,7,8,9,10},
      3:{11,12,13,14} 
    }
}

脚本

function recursive(dis)
    {
        $(this).find(' > ul ').each(function(){
                params[$(this).attr('data-self')]=[];
                var i=0;
                $(this).find('li').each(function(){

                     if($(this).has('ul'))
                     {
                        params[$(this).attr('data-parent')][i++]=rec(this);
                     }else
                     {
                        params[$(this).attr('data-parent')][i++]=$(this).attr('data-self');
                     }

                });
            });

    }
recursive('#org1');
console.log(params);

Answer 1

我更喜欢以下内容。您需要对 HTML 进行的 2 处更改是：

1) 向您的ul 添加一个类，例如<ul data-self="2" class="nodes">。 2）在包装器ul中添加一个类，例如<ul data-self="1" class="parent">。

var json = {};
$("#org1").find("ul.parent").each(function() {
    
    var $this = $(this);
    json[$this.data("self")] = {};
    var $nodes = $this.find("ul.nodes");
    $nodes.each(function() {
        var children = $(this).find("li").map(function() {
            return $(this).data("self")
        }).get();
        json[$this.data("self")][$(this).data("self")] = children;
    });
});

alert (JSON.stringify(json));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="org1">
    <li>
        Main
        <ul data-self="1" class="parent">
            <li data-self="2" data-parent="1">A
                <ul data-self="2" class="nodes">
                    <li data-self="5" data-parent="2">A1</li>
                    <li data-self="6" data-parent="2">A2</li>
                    <li data-self="7" data-parent="2">A3</li>
                    <li data-self="8" data-parent="2">A4</li>
                    <li data-self="9" data-parent="2">A5</li>
                    <li data-self="10" data-parent="2">A6</li>
                </ul>
            </li>
            <li data-self="3" data-parent="1">B
                <ul data-self="3" class="nodes">
                    <li data-self="11" data-parent="3">B1</li>
                    <li data-self="12" data-parent="3">B2</li>
                    <li data-self="13" data-parent="3">B3</li>
                    <li data-self="14" data-parent="3">B4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>