javascript - DOM 到 JSON 的递归函数

Question

我正在尝试创建 HTML 特定部分的 JSON 索引。这是我的 HTML:

<div class="box span12">
    <div class="row-fluid">
        <div class="item span12" data-width-helper="12"></div>
    </div>
    <div class="row-fluid">
        <div class="box span6">
            <div class="row-fluid">
                <div class="item span12" id="4" data-width-helper="12"></div>
            </div>
            <div class="row-fluid">
                <div class="box span6">
                    <div class="row-fluid">
                        <div class="item span12" id="6" data-width-helper="12"></div>
                    </div>
                    <div class="row-fluid">
                        <div class="item span12" id="7" data-width-helper="12"></div>
                    </div>
                </div>
                <div class="item span6" id="5" data-width-helper="6"></div>
            </div>
        </div>
        <div class="item span6" data-width-helper="6"></div>
    </div>
    <div class="row-fluid">
        <div class="item span8" id="2" data-width-helper="8"></div>
        <div class="item span4" id="3" data-width-helper="4"></div>
    </div>
</div>

最终，我希望得到如下所示的 JSON:

[
    [
        {
            "id":1,
            "width":12
        }
    ],
    [
        {
            "width":6,
            "items":
            [
                [
                    {
                        "id":4,
                        "width":12
                    }
                ],
                [
                    {
                        "width":6,
                        "items":
                        [
                            [
                                {
                                    "id":6,
                                    "width":12
                                }
                            ],
                            [
                                {
                                    "id":7,
                                    "width":12
                                }
                            ]
                        ]
                    },
                    {
                        "id":5,
                        "width":6
                    }
                ]
            ]
        },
        {
            "id":8,
            "width":6
        }
    ],
    [
        {
            "id":2,
            "width":8
        },
        {
            "id":3,
            "width":4
        }
    ]
]

基本上，每个盒子都包含一个行数组，其中包含一个项目数组，这些项目是带有一些描述性信息的对象。我似乎无法理解一个递归函数，该函数将构建该 json 对象，以便可以有 boxes 而不是 items 无限级别地下降。

希望比我聪明的人能够花时间提供帮助 - 我真的很感激。顺便说一句，我很喜欢使用 jQuery 和/或 Underscore.js

Answer 1

我不完全确定您希望该函数如何工作，所以我只是为您编写了一些伪代码。这里的目标是将每个标签放入其子标签的数组中，除非标签是一个项目，在这种情况下，它会创建一个具有“width”和“id”的对象。

function toJSON(element)
    var returnObject;
    switch
        case: item
            returnObject = {
                "id": elementId,
                "width": elementWidth
            };
            break;
        case: default
            returnObject = [];
            for each child
                returnObject.push(toJSON(child));
            break;
    return returnObject;