4

私は、インタラクティブな D3.js キャンバスでノードを展開するためのこのクレイジーな for ループを持つプロジェクトで作業しています。本質的に、私が望むのは、すべての子を拡張することです。したがって、オブジェクトに子がある場合は、それらを展開したいと考えています。

これからコードのチャンクを切り取りました。for ループが多すぎてばかげています。これを単純な「すべての子を見つけて、toggle(); と update(); をプリフォーム」に減らすにはどうすればよいですか?

$('.expandAll').click(function(e) {
    e.preventDefault();
    length = root.children.length;

    for (var i = 0; i < length; i++) {
        toggle(root.children[i]);
        update(root);

        if (root.children[i]['children']) {
            childlength = root.children[i]['children'].length;

            for (var j = 0; j < childlength; j++) {
                toggle(root.children[i]['children'][j]);
                update(root);

                if (root.children[i]['children'][j]['children']) {
                    childlength2 = root.children[i]['children'][j]['children'].length;

                    for (var k = 0; k < childlength2; k++) {
                        toggle(root.children[i]['children'][j]['children'][k]);
                        update(root);
                    }
                }
            }
        }
    }
});
4

3 に答える 3

3

再帰の良い例のように思えます:

$('.expandAll').click(function(e) {
    e.preventDefault();

    expandAll(root);
});

var expandAll = function (node) {
    toggle(node);
    update(node);

    // edit: if nodes with no children are lacking the children property
    if (!node.children) {
        return;
    }

    for (var i = 0, length = node.children.length; i < length; i++) {
        expandAll(node.children[i]);
    }
};

正確な意味はわかりませんがtoggle、を呼び出した後、トップレベルの呼び出しをupdate1 回だけ実行できる場合があります。updateexpandAll(root);

于 2013-07-19T15:28:28.733 に答える