Javascript Jquery和克隆html部分？

我有这个模板

div

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

如何缩短此代码

---

我知道我可以使用模板，但那是另一回事。

如果你不想使用模板，也许你不能把代码缩短那么多，但你还有一些事情可以解决

您不需要将元素保存到变量

g

，因为您不需要将该变量用于任何事情

您需要修复背景色属性，因为

color1

将不是有效的背景色值

jQuery方法可以采用第二个参数，即要在其中搜索的上下文，因此

thediv.find（“.spanColor”）

可以缩短为

$（“.spanColor”，thediv）

，在我看来，这可能不会短得多，但可读性更强

您可以使用该方法替换

.css（'display'，'block'）

总而言之，大概是这样的：

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);
}

for（变量i=0；i.divRowData:first”）.clone（）.show（）；
$（“.spanColor”，thediv.css（'background-color'，'#fc0'）；
$（“.spanText”，thediv）.text（arrData[i].text）；
$（“.divDetails”）。追加（thediv）；
}

---

由于一些遍历是必要的，我不能得到比这更短的。但至少这是一个连锁的例子；）

color-i只是放置数据的一个示例。不管怎样，你对[g]的理解是对的。这个

thediv.find（“.spanColor”）.css（'background-color'，'color'+i.）和self（）.find（.spanText”）.text（arrData[i].text）怎么样

@RoyiNamir如果你将

和self（）

交换到

.parent（）

，这会起作用，但我相信读起来会有点困难。@christoferelasson Hehe，很乐意帮助：）它们似乎都能起作用……我无法理解它们之间的区别…：-（@RoyiNamir”如.end（）的讨论中所述），jQuery对象维护一个内部堆栈，用于跟踪对匹配的元素集所做的更改。当调用其中一个DOM遍历方法时，新的元素集将推送到堆栈上。如果还需要上一组元素，.andSelf（）可以帮助。“

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);
}

$.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");

});