web-dev-qa-db-ja.com

オブジェクトに対するjQueryの再帰的な反復

先日、jQueryで、子オブジェクトを再帰的に反復するように設定できるフラグを持つオブジェクトイテレータを見たと思った。私はそれがjQuery.each()の一部だと思っていましたが、今ではドキュメントにその機能が表示されていません。

自動的に再帰的にできるjQueryのそのようなイテレータはありますか?

(私はJavaScriptでそれを行う方法を知っています。私が実際に見たと思ったものを実際に見たかどうか疑問に思っています。)

どうもありがとう!

編集:明確にするために、私はjQuery.each()のようなユーティリティメソッドを考えていました。

以下の例では、each()メソッドは、myobj.obj2.key2のネストされたオブジェクトを含むすべてのオブジェクトを反復処理します。

私はそれについてjQueryドキュメントで何かを見たと誓ったかもしれませんが、今それを見つけることができません。

ありがとう。

var myobj = {
    obj1: {key1:'val1', key2:'val2'},
    obj2: {key1:'val1', key2: {nest1:'val1', nest2:'val2', nest3:'val3'}},
    obj3: {key1:'val1', key2:'val2'}
}

$jQuery.each(myobj, function(key,val) {
    // Code to run over each key/val pair
    // Does so recursively to include all nested objects
})
29
user113716

.find( 'selector')メソッドは基本的に.children()の再帰的なバージョンであり、子孫の最初のレベルのオブジェクトのみを検索する.children()とは対照的に、セレクターに一致する子孫オブジェクトを検索します。

2nd EDIT(私は初めてひどい言い方をし、コードを少し台無しにした!):

わかりました、フラグとしてのこの機能は意味をなさないと思います:そのオブジェクトを永遠に繰り返し再帰することができます(私を信じて、Firefoxを壊してしまったので)。子オブジェクトは有効な再帰候補です。

あなたがする必要があるのは、単純に関数を次のように分割することです:


var myobj = {
    obj1: {key1:'val1', key2:'val2'},
    obj2: {key1:'val1', key2: {nest1:'val1', nest2:'val2', nest3:'val3'}},
    obj3: {key1:'val1', key2:'val2'}
}


$jQuery.each(myobj, function(key, val) { recursiveFunction(key, val) });

    function recursiveFunction(key, val) {
        actualFunction(key, val);
        var value = val['key2'];
        if (value instanceof Object) {
            $.each(value, function(key, val) {
                recursiveFunction(key, val)
            });
        }

    }
</ code>

function actualFunction(key、val){ /// do stuff }
37
Ed James

上記の@Ed Woodcockのバージョンのわずかに簡略化されたバージョン。私がこれを使用する必要があった彼らの方法は、名前付きリンクを含むHTMLの箇条書きリストを出力することでした。

var list = "<ul>";
$.each(data, recurse);

function recurse(key, val) {
    list += "<li>";
    if (val instanceof Object) {
        list += key + "<ul>";
        $.each(val, recurse);
        list += "</ul>";
    } else {
        list += "<a href='" + val + "'>" + key + "</a>";
    }
    list += "</li>";
}
list += "</ul>";

$("#container").html(list);
9
CBarr

このようにすると、これをはるかに簡単に行うことができます

$(this).children().each(function(index, element) {
...
});
0
Justin T. Watts

このqとaはとても役に立ちました。ありがとうございました。 (私はまた、クッキーの参照を高く評価しました。私はまだその本を読み続けています!)。

これは、単純なi18n jQueryソリューションの「検索と置換」を実行する私のバージョンです(これは誰かに役立つかもしれません)。用語が辞書にある場合、クラスにラップされた用語がそれを置き換えます。

フィドル: http://jsfiddle.net/orolo/CeY5Y/11/

HTML:

In the <span class="i18n">Clear</span> and also <span class="i18n">Save Widget</span>. I'm <span class="i18n">On</span> the <span class="i18n">sub3</span> and <span class="i18n">PDF</span>.

javascript/jQuery:

var term = "";

var customDict = {
    "Level One": {
        "Clear": "1234",
        "CSV": "CSV",
        "First": "First",
        "Last": "Last",
        "Next": "Next",
        "On": "42",
        "Off": "Off",
        "PDF": "alpha",
        "Prev": "Prev",
        "Rows": "Rows",
        "Save Widget": "saver widgetor",
        "Stats": "statistiques",
        "sub": {
            "sub2": {
                "sub3": "inception"
            }
        }
    }
};

function recursiveLookup(key, val) {
    //test for a match between term and key
    if (key === term) {
        $('.i18n').each(function() {
            if ($(this).text() === key) {
              $(this).text(val);  
            }
        });
    }
    //val is an object or no match? recur
    if (val instanceof Object) {
        $.each(val, function(key1, val1) {
            recursiveLookup(key1, val1);
        });
    }
}

function convert() {    
    $('.i18n').each(function(key, val) {
        term = $(this).text();  
        $.each(customDict, function(key, val) {
            recursiveLookup(key, val);
        });

    });
}


/*call the function*/
convert();
0
orolo