Question

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

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

使用jQuery / JS，我想创建一个数组（或其他类型的组织结构），当通过for循环运行时可以更改每个块的'Name'和'Content'。

例如，我有两个数组：

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

编辑：如果没有创建多个数组，有没有更好的方法呢？

Answer 1

我认为这是你的答案：

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/

Answer 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/

jQuery：使用数组中的信息克隆HTML

2 个答案: