转换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来做到这一点，但嵌套使事情变得复杂。

请帮忙？

在此先感谢。

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; 
}