使用 css 内容循环 javascript答案

【问题标题】：loop javascript with css content使用 css 内容循环 javascript
【发布时间】：2011-07-27 00:06:09
【问题描述】：

我需要在我的代码中重复此内容十次，然后我认为这可以在 for 或 while 之类的循环中进行，但我尝试过，但我做不到

<li>
    <img style="float: left;" src="img/gaja.jpg" alt="Angry face" />
    <div style="width: 100px; height: 20px; float:left; margin-left: 5px; font: bold 12px arial;">IceMan</div>
    <div style="width: 150px; height: 20px; float:left; margin-left:5px;">Web Designer / FullTime</div>
</li>

有什么帮助吗？

谢谢

【问题讨论】：

标签： javascript html css loops html-lists

【解决方案1】：

var li = $('li');
for(var i = 0; i < 10; i++) {
    li.clone().appendTo(li.parent());
}

【讨论】：

为什么你需要 jquery 来完成如此琐碎的事情？
我认为它是 jsut，因为 jQuery 已被用于当今的一切......简单与否，jQuery 让它变得简单 :)
我们的一生都是琐碎的集合。随意使用它，让生活更轻松
答案真的那么简单吗？节省 3 行代码总是比链接到几千字节的 JavaScript 库更好吗？（=另一个请求）:)
问题不在于库，我在我的项目中使用了 jquery。代码是完美的。谢谢

【解决方案2】：

由于最初的问题中没有指定 jQuery，我假设它没有被使用。

纯 JavaScript 的方式是这样的：

var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li")[0];
for(var i=1;i<10;i++){
    ul.appendChild(li.cloneNode(true));
}

jsfiddle 上的代码示例。

【讨论】：

【解决方案3】：

for (var i = 0; i < 10; i++)
{
    document.write('<li>');
    document.write('<img style="float: left;" src="img/gaja.jpg" alt="Angry face" />');
    document.write('<div style="width: 100px; height: 20px; float:left; margin-left: 5px; font: bold 12px arial;">IceMan</div>');
    document.write('<div style="width: 150px; height: 20px; float:left; margin-left:5px;">Web Designer / FullTime</div>');
    document.write('</li>');
}

【讨论】：

如果你不太依赖 JavaScript，你可以使用像这样非常基本和纯粹的 JavaScript 方法。
已经发布了更好的方法来做到这一点。我的只是最基本的一个:)