将HTML div内容转换为JSON对象

Question

我目前有以下HTML...

<div id="tabs-1" class="tabs-1 ui-tabs-panel ui-widget-content ui-corner-bottom ui-droppable" aria-labelledby="layoutName" role="tabpanel" aria-expanded="true" aria-hidden="false" style="z-index: auto;">

    <div id="mosami1" class="mosami ui-draggable ui-draggable-dragging inside-drop-zone highlight "  style="position: absolute; left: 38.4735%; top: 78.1949%; width: 19.3344%; z-index: 100;">
        <div class="ui-resizable-handle ui-resizable-n" style="z-index: auto; margin-left: 119.583px;"></div>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: auto; margin-left: 119.583px;"></div>
        <div class="ui-resizable-handle ui-resizable-ne" style="z-index: auto;"></div>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: auto;"></div>
        <div class="ui-resizable-handle ui-resizable-nw" style="z-index: auto;"></div>
        <div class="ui-resizable-handle ui-resizable-sw" style="z-index: auto;"></div>
    </div>
</div>

我希望将以下内容转换为JSON格式：

{
    "divID": {
        "options": {
            "id": "tabs-1",
            "class": "tabs-1 ui-tabs-panel ....",
            "z-index": "auto",
        }
        "div": {
            "options": {
                "id":"mosami1",
                "class": "mosami ui-draggable ui-draggable-dragging"
                "z-index": "100",
                "left": "38.47"
            },
        },
        "div1": {
            "class": "ui-resizable-handle ui-resizable-n"
            "z-index": "auto"
        }
    }
    //...
} 

我尝试使用JQuery来实现这个功能，但是嵌套使得事情变得复杂。

请帮忙吗？

提前致谢。

- Sikander

Answer 1

最简单的方法是使用一个递归函数，该函数接收一个jQuery节点并返回表示该节点数据的javascript对象。解析传入节点的选项，然后迭代jQuery节点的子节点调用递归函数。代码示例如下：

var parse = function($el) {
  var result = {};

  result.options = {
    // parse $el for properties
  };

  $el.children().each(function(i, e) {
    result[$(this).prop('tagName') + i] = parse($(this));
  })

  return result;
}

- gbabiars