1

我有以下 HTML，我想在 div 容器 (.container) 中重复 5 次。

<div class="block">
   <div class="name">Name</div>
   <div class="content>Content</div>
</div>

使用 jQuery/JS，我想创建一个数组（或某种其他类型的组织结构），当通过 for 循环运行时可以更改每个块的“名称”和“内容”。

例如，我有两个数组：

var names = ["Joe","Jane","Bill","Nicole","Dennis"];
var content = ["First content","Second content","Third content","Fourth content","Fifth content"]

我想克隆顶部的 HTML，并为每个块，将名称和内容更改为其各自的数组项。我怎样才能做到这一点？

现在，我有重复 HTML 的代码。

var row = $('.block');

for(var i = 0; i < 5; i++ )
  $('.container').append(row.clone())
}

编辑：有没有更好的方法可以在不创建多个数组的情况下做到这一点？

4

2 回答 2

2

我想这是你的答案：

var row = $('.block');

for(var i = 0; i < 5; i++ ){
  var cp = row.clone();
  cp.find('.name').text(names[i]);
  cp.find('.content').text(content[i]);
  $('.container').append(cp);
}

在这里工作演示：http: //jsfiddle.net/pulkitm/NV2e2/

于 2012-11-21T21:09:13.143 回答
2

您可以在添加元素之前使用find和text方法并更改元素的内容，请注意您缺少块的开头{。for

for (var i = 0; i < 5; i++) {
   row.clone()
      .find('.name').text(names[i]).end()
      .find('.content').text(content[i]).end()
      .appendTo('.container')
}

http://jsfiddle.net/SU3vF/

于 2012-11-21T21:10:56.800 回答