3

私はこのテンプレートを持っていますdiv

<div class="divDetails">
    <div class="divRowData" style="display: none "> 
          <span class="spanColor"></span>
          <span class="spanText"></span>
    </div>
</div>

隠されています。

オブジェクト配列があり、divRowData配列から注入されたデータを複製する必要があります。(そして、それぞれの新しいセクションを表示します)。

しかし、私のjqueryコードは少し混乱しているようで、それを行うより短い方法を探しています。

現在私は：

 for (var i = 0; i < arrData.length; i++)
           {
               var thediv = $(".divDetails>.divRowData:first").clone().css('display','block');
               var g = thediv.find(".spanColor").css('background-color', 'color'+i);
               var g = thediv.find(".spanText").text(arrData[i].text);
               thediv.appendTo(".divDetails");

           }

このコードを短くするにはどうすればよいですか?

http://jsbin.com/etudak/1/edit

テンプレートを使用できることは知っていますが、それは別の話です。

4

2 に答える 2

3 
$.each(arrData, function(i, v){

    $(".divDetails>.divRowData:first")
     .clone()
     .show()
     .find(".spanColor").css('background-color', 'color'+i)
     .end()
     .find(".spanText").text(v.text)
     .end()
     .appendTo(".divDetails");

});

多少のトラバースが必要なので、これより短くすることはできませんでした。しかし、少なくともそれは連鎖した例です ;)

于 2013-01-17T12:42:44.257 に答える
1

テンプレートを使用したくない場合は、おそらくコードをそれほど短くすることはできませんが、とにかく修正できることがいくつかあります。

  1. その変数は何にも使用しないため、要素を variable に保存する必要はありませgん。
  2. color1は有効な background-color 値ではないため、background-color プロパティを修正する必要があります。
  3. jQuery メソッドは、検索対象のコンテキストである 2 番目のパラメーターを受け取ることができるため、thediv.find(".spanColor")短くすることができます$(".spanColor", thediv)。
  4. .css('display','block')メソッドに置き換えることができます.show()。

全体として、おそらく次のようなものです。

for (var i = 0; i < arrData.length; i++)
{
    var thediv = $(".divDetails>.divRowData:first").clone().show();

    $(".spanColor", thediv).css('background-color', '#fc0');
    $(".spanText", thediv).text(arrData[i].text);

    $(".divDetails").append(thediv);
}
于 2013-01-17T12:32:17.100 に答える