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. 您需要修复 background-color 属性，因为color1它不是有效的 background-color 值。
  3. jQuery 方法可以采用第二个参数，它是要在其中搜索的上下文，因此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 回答