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对象，这样就可以box而不是item向下无限级别。

希望比我更聪明的人可以花时间帮忙 - 我真的很感激。作为旁注，我可以使用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;