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/

修改
Chrome 10中的结果：

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

修改
字符串化的JSON结果：

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

Answer 2

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

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

我不确定这是否是您问题的答案：）

DOM结构到数组

2 个答案: