如何从HTML元素树生成多维JavaScript/jQuery数组或对象？

需要从带有indexed类、id属性和data-id属性的HTML div结构中，生成符合指定层级结构的JavaScript对象。现有代码无法正确生成子元素的嵌套结构，需要修正逻辑。

原有代码 #

JavaScript代码 #

jQuery( document ).ready( function ( $ ) {

        var obj = {}

        var count = 0;

        function extract_children( parent ){

            parent.find( '.indexed-' + parent.attr( 'id' ) + '-children > .indexed' ).each( function() {

                // 需要在这里构建对象并返回

                console.log( $( this ).attr( 'id' ) );
                console.log( $( this ).attr( 'data-id' ) );

                var next = $( '.indexed-' + $( this ).attr( 'id' ) + '-children > .indexed' );

                if( next && next.hasClass( 'indexed') ) extract_children( $( this ) );

            });

        }

        $( '.indexedcontainer > .indexed' ).each( function(){

            count++;
      
            obj[ count ] = {};  
 
            obj[ count ][ 'id' ]        =  $( this ).attr( 'id') ;
            obj[ count ][ 'data-id' ]   =  $( this ).attr( 'data-id');
            obj[ count ][ 'children' ]  =  extract_children( $( this ) );

        }).promise().done( function(){

            console.log( obj );

        });

    }); 

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="indexedcontainer">

    <div class="indexed" id="1" data-id="1000">
        <div class="indexed-1-children">
           <div class="indexed" id="101" data-id="1001">

                <div class="indexed-101-children">

                    <div class="indexed" id="102" data-id="1002">
                        
                        <div class="indexed-102-children">

                            <div class="indexed" id="1022" data-id="10022">
                                
                                可以有更多层级嵌套

                            </div>

                            <div class="indexed" id="1023" data-id="10023">
                                
                                可以有更多层级嵌套

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="indexed" id="102" data-id="1002">

                <div class="indexed-102-children">

                    <div class="indexed" id="1022" data-id="10022">

                        可以有更多层级嵌套

                    </div>

                </div>

            </div>


        </div>

    </div>

</div>

补充说明 #

顶级.indexed元素支持多个，示例如下：

<div class="indexed" id="2" data-id="2000">...</div>
<div class="indexed" id="3" data-id="3000">...</div>

期望生成的对象结构 #

obj[1].id = 1;
obj[1].data_id = 1000;

obj[1].children[1].id = 101;
obj[1].children[1].data_id = 1001;

obj[1].children[1].children[1].id = 102;
obj[1].children[1].children[1].data_id = 1002;
obj[1].children[1].children[1].children[1].id = ...

obj[1].children[1].children[2].id = 103;
obj[1].children[1].children[2].data_id = 1003;
obj[1].children[1].children[2].children[1].id = ...

修正后的代码 #

核心问题是原extract_children函数未返回子元素结构，修改后实现递归收集嵌套结构：

jQuery(document).ready(function ($) {
    var obj = {};
    var count = 0;

    // 递归提取子元素并返回结构数组
    function extract_children(parent) {
        var children = [];
        var childCount = 0;
        
        parent.find('.indexed-' + parent.attr('id') + '-children > .indexed').each(function () {
            childCount++;
            var $this = $(this);
            // 构建当前子元素的对象
            var childObj = {
                id: $this.attr('id'),
                data_id: $this.attr('data-id'),
                children: extract_children($this) // 递归获取下一层子结构
            };
            children[childCount] = childObj;
        });
        
        // 无子女时返回空数组，避免属性为undefined
        return children.length > 0 ? children : [];
    }

    $('.indexedcontainer > .indexed').each(function () {
        count++;
        var $this = $(this);
        obj[count] = {
            id: $this.attr('id'),
            data_id: $this.attr('data-id'),
            children: extract_children($this)
        };
    }).promise().done(function () {
        console.log(obj);
    });
});

代码说明 #

1. 递归逻辑优化：extract_children函数创建数组存储子元素结构，遍历父元素的直接子元素，为每个子元素生成包含id、data_id和children的对象，递归调用自身获取嵌套结构后返回数组。
2. 属性名统一：将原data-id改为data_id，匹配期望的结构命名。
3. 空值处理：无子女时返回空数组，保证结构一致性。

运行修正后的代码即可生成符合要求的多层级对象结构。

内容的提问来源于stack exchange，提问作者codedudey