0

別のサイトから受け取ったデータを使用して「フィード」を作成しようとしています。同様のオブジェクトの配列として提供されます。データを表示するいくつかの方法を試しましたが、最善の方法について考えを変え続けています。現在、オブジェクトを介してjQueryループを使用しており、ネストしてそれぞれに同じdivを作成しています$(<div>).html()

これは、新しい要素を追加するためにプレーンな JavaScript の以前の方法よりもはるかに少ないコードを使用しますが、これが jQuery の最適な使用法であるかどうかはわかりません。これを行うより良い方法はありますか？配列要素ごとに新しい JavaScript オブジェクトを作成する可能性がありますか?

編集：これはコードの小さなスニペットです。それは閉鎖されておらず、クラス名と変数を変更しましたが、それは大まかな考えです。

$.each(feed.data, function(i, var_name) {
    $("<div>").attr({
    "id" : var_name.created_time,
    "class" : "Post"
    }).html(
        $("<img>").attr({
        "class" : "Picture",
        "src" : "some_src" + var_name.id + "/picture"
        });
4

1 に答える 1

0

個々の要素ごとに多数の関数呼び出しが行われるため、このメソッドは可能なすべてのメソッドの中で最も効率が低くなります。

提案されているようにテンプレートエンジンを追加することもできますが、HTML文字列を作成する方法も学ぶ価値があり、各要素をラップし$()ても実際にはコードが削減されないことがわかります。

var newHtml=[];
$.each(feed.data, function(i, var_name) {

    newHtml.push('<div id="'+var_name.created_time+'" class="Post">');
      newHtml.push('<img class="Picture" src="some_src"' + var_name.id + '/picture" />');

         /* some nested data*/
         $.each( var_name.someRepeatingElements), function(i,val){
             newHtml.push('<p>'+val.content+'</p>')
         });
     newHtml.push('</div>')
});

/* after looping all data only make one append to DOM*/

$('#someDiv').append( newHtml.join(''))

$.html()意味的には、これは多数の呼び出しをネストするよりも読みやすいです。

多くの場合、複雑なネストをあまり行わずに、独自の文字列を作成する方が、テンプレートとテンプレートにデータを入力するコードを作成するよりも手間がかかりません。

于 2013-01-20T14:58:19.490 に答える