Question

我正在尝试将id的DOM层次结构放入javascript数组中。（我正在使用jQuery UI进行排序以重新排列DIV，并且它们的toArray和序列化呈现平坦（非分层）结果。）

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

如何重复遍历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类型的检查（无论如何，这对我来说都是一个好主意）。

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

Answer 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/（向下滚动以查看嵌套数组的文本版本）。

Jquery DOM元素子元素的多维数组

1 个答案: