DOM 结构到数组答案

【问题标题】：DOM structure to arrayDOM 结构到数组
【发布时间】：2011-04-20 11:04:46
【问题描述】：

我正在开发“菜单设计器”——一种在应用程序后端编辑菜单结构的工具。我有这样的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。）

【问题讨论】：

你想要只使用 JQuery 的解决方案，还是非 JQuery 的解决方案就足够了？）

标签： javascript jquery arrays json

【解决方案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": {}}}

【讨论】：

我不知道这是什么意思...无需检查 nodeTypes：jQuery 仅查询 HTMLElements。
Submenu header
也会被您的代码解析。您必须只过滤 li 或 ul 的
.children() 仅查询直接子级。 UL 的直接子级只能是 LI，而不是 H3。在 jsfiddle 上试试。
谢谢，解决了我的问题。我想用测试 id 和 json stringify 写下编辑，但你已经更新了 :o) 然后在 PHP 中我只使用了 json_decode( $structure, true );现在我有关联数组。再次感谢。
有一个错误！我无法解释为什么，但是当我在 Opera 中使用它时，它并不关心项目的顺序。我已经通过愚蠢的尝试解决了它……它是“.substr(3)”。我删除了它，添加了 $id = (int)preg_replace("~^mi-([0-9]+)~", "$1", $id ); （无论如何更好）到 PHP 中的处理程序，现在它工作正常。

【解决方案2】：

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

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

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

【讨论】：

我认为 Ondrej 想要解析这段代码并在输出中获取该数组。