DOM 结构到数组

Question

我正在开发“菜单设计器” - 一种在应用程序后端编辑菜单结构的工具。 我有这样的 html 代码

<ul id="menu-designer-control">
    <li id="mi-2">
        <h3>Submenu header</h3>     
        <ul>
            <li id="mi-4"><h4>Hello world - article</h4></li>

            <li><!-- Drop here --></li>
        </ul>
    </li>
    <li id="mi-1">
        <h3>Hello world - article</h3>      
        <ul>
            <li><!-- Drop here --></li>
        </ul>
    </li>

</ul>

我想在 PHP 中得到这样的数组。

array(    
    2 /* top level item id */ => array( 4 /* children id */ ), 
    1 => array() /* or null or whatever */    
);

您能给我一个建议吗？我尝试过 .sortable( 'serialize );，我尝试过使用每个（在所有 li-s 上）。没有成功 - 而且我对 javascript 数组不太熟悉:- / (所以我很不确定它应该是什么样子以及如何将它作为 JSON 对象/字符串发送到服务器？)。

非常感谢

（我正在使用 jQuery。）

Answer 1

function children(ul) {
  var lis = ul.children(), obj = {};
  lis.each(function(i, li) {
    var id = $(li).attr('id').substr(3);
    if ( id ) {
      obj[id] = children($('> ul', li));
    }
  });
  return obj;
}

var obj = children($('ul#menu-designer-control'));
console.log(obj);

结果将是对象中的对象等。如果仅存在 2 层 LI，则第二层对象将始终为空（没关系）。它的构建是递归的：3 层、4 层等，没问题。

编辑
稍微调整一下： http://jsfiddle.net/rudiedirkx/xhLwF/

编辑< /strong>
Chrome 10 中的结果：

Object
  1: Object (empty)
  2: Object >
    4: Object (empty)

编辑
字符串化 JSON 结果：

{"1": {}, "2": {"4": {}}}

Answer 2

您必须使用对象来执行此操作：

var dom = {
   "2":[4]
   ,
   "1":[]
};

我不确定这是否是您问题的答案:)