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オブジェクトを構築する再帰関数に頭を包み込んで、 sのbox代わりにesをitem無制限にレベルダウンできるようにすることはできないようです。

私より賢い人が時間を割いて助けてくれることを願っています - 本当に感謝しています. 補足として、jQuery や Underscore.js を使用しても問題ありません。

Answer 1

関数をどのように機能させたいのかよくわからないので、ちょっとした疑似コードを書いてみました。ここでの目標は、タグがアイテムでない限り、すべてのタグをその子の配列にすることでした。アイテムの場合は、代わりに「幅」と「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;