0

ID の DOM 階層を JavaScript 配列に取得しようとしています。(私はjQuery UI sortableを使用して、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 に空の文字列要素が作成されます。空でない場合の型チェックを作成するのではなく、ロジックでこれを修正するにはどうすればよいですか (とにかく良いアイデアだと私は言います)。

サンドボックス 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 ノードの 2 つのプロパティを使用して DOM をウォークすることができます:firstChildとnextSibling. から始めてdocument.bodyを取得し、そこからそれぞれをfirstChild見ていきますが、それは null ではありません。firstChildnextSibling

再帰を使用するのが最も簡単ですが、最速ではありません。

参考までに、私のコメントで述べたように、通常、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 に答える