0

我正在尝试将 id 的 DOM 层次结构放入 javascript 数组中。（我正在使用可排序的 jQuery UI 重新排列 DIV 及其 toArray 并序列化呈现一个平面（非分层）结果）。

基于其他 SOF jfiddle 解决方案等构建的代码，这是我的沙箱：

更新 http://jsfiddle.net/rfwkQ/2/

如何遍历 DOM 子节点并将其 id 记录到多维数组中？

编辑：

function getChildren(elem) {
var parent = [];
if ($(elem).children().length !== 0) {
    $(elem).children().each(function() {

        if ($(this).find('> div').children().size() !== 0) {
            var child = getChildren(this);
            parent.push(child);
        } else {
            parent.push(this.id);
        }
    });
    return parent;
}
}

我已经组装了上面的函数来尝试迭代 Div 和他们的孩子。返回多维数组中的 Div。

进一步的问题 这会在更高级别的嵌套 div 中创建一个空字符串元素。我怎样才能在我的逻辑中解决这个问题，而不是创建一个 if not empty 类型检查（无论如何这都是一个好主意，我说）。

沙盒 2.0：链接更新如下

终于解决了（感谢 freenode irc 上 #jquery 上的“shoky”）

http://jsfiddle.net/rfwkQ/8/ 

function getChildren(elem) {
var parent = [];

$(elem).children('div').each(function() {
    parent.push( 
        $(this).children('div').length ? getChildren(this) : this.id);
});

return parent;
}
4

1 回答 1

1

您可以使用 DOM 节点的两个属性遍历 DOM：firstChild和nextSibling. 从 开始document.body，firstChild然后从那里开始查看每个firstChild，nextSibling这不是空的。

递归是最简单的，虽然不是最快的。

仅供参考，正如我在评论中所说，通常您不想构建自己的 DOM 副本，因为可以查询或遍历 DOM 以服务于几乎任何目的，而无需构建一个全新的结构副本，该副本立即被淘汰-更改后立即过期。

这里有一些简单的 javascript 来解决这个问题：

function getIdList(parent) {
    var list = [];
    var node = parent.firstChild;
    while (node) {
        if (node.nodeType == 1 && node.tagName == "DIV") {
            list.push(getIdList(node));
        }
        node = node.nextSibling;
    }
    // if no children, just return the id of the parent
    if (list.length == 0) {
        list = parent.id;
    }
    return(list);
}

还有一个关于您的 HTML 的工作演示：http: //jsfiddle.net/jfriend00/TLVr7/（向下滚动查看嵌套数组的文本版本）。

于 2012-07-28T04:20:16.013 回答