Question

为了加快我的原型设计阶段，我想克隆我的div，然后用存储到数组中的一些内容填充它们。

以下是一些需要克隆的通用内容：

<li class="shots--li">
  <img class="image" src="images/dribbble.png">
  <h1>Title</h1>
  <p>Description</p>
</li>

我已经知道如何克隆：

$(document).ready(function() {
    var shots = $('.shots--li');
    for (var j = 0; j < 3; j++) {
        shots.clone().insertAfter(shots);
    }
});

现在我的问题是，如何替换克隆的内容？我想像这样的数组：

$(document).ready(function() {
    var img_src = [
        "http://placehold.it/50x60",
        "http://placehold.it/50x70",
        "http://placehold.it/50x80"
    ];
    var img_src_array = img_src.split(',');
    $.each(img_src_array, function(key,value) {
        $('.shots--li img').append.html(value);
    });
    var title_h1 = [
        "Some title",
        "Another title",
        "A Title?"
    ];
    var title_h1_array = title_h1.split(',');
    $.each(title_h1_array, function(key,value) {
        $('.shots--li h1').append(value);
    });
    var paragraph_p = [
        "Some description",
        "Another description",
        "A Description?"
    ];
    var paragraph_p_array = paragraph_p.split(',');
    $.each(paragraph_p_array, function(key,value) {
        $('.shots--li p').append(value);
    });
});

更新：这是我的工作fiddle

我真的不知道是否有一个简单的方法，如果我的问题填写了stackoverflow规则，但由于我从未同时使用过数组和克隆...你的想法会很棒。<登记/> 谢谢！

Answer 1

我建议您以编程方式执行整个过程。它将使插入示例内容的过程变得更加容易。

function makeExampleItem(src, title, description) {
  var $li = $('<li class="shots--li"></li>'),
      $img = $('<img class="image"></img>'),
      $h1 = $('<h1></h1>'),
      $p = $('<p></p>');

  $img.attr('src', src);
  $h1.html(title);
  $p.html(description);

  return $li
    .append($img)
    .append($h1)
    .append($p);
}

然后，您可以遍历示例数据并为每个位创建一个项目。

我建议将其缩小为一个列表。

var examples = [
  {
    src: 'http://placehold.it/50x60',
    title: 'Some title',
    description: 'Some description'
  },
  {
    src: 'http://placehold.it/50x60',
    title: 'Some title',
    description: 'Some description'
  }
];

然后我们只需循环遍历它，为每个项目创建一个<li>，然后将其插入某个地方的<ul>。

var $ul = $('#my-ul');

examples.forEach(function(example) {
  var $li = makeExampleItem(example.src, example.title, example.description);
  $ul.append($li);
});

Answer 2

当您致电$(".shots--li <element>").append()时，您将附加所有 LI，而不仅仅是其中之一。您需要一次只选择一个，您可以使用.eq()。您还错误地使用append - 您无法附加到图像，因为它没有子元素。您需要将其src属性设置为图片网址。对于其他元素类型，您可能希望使用.html()替换内容，而不是.append()。

$.each(img_src, function(i, value) {
    $(".shots--li img").eq(i).attr("src", value);
});

$.each(title_h1, function(i, value) {
    $(".shots--li h1").eq(i).html(value);
});

$.each(paragraph_p, function(i, value) {
    $(".shots--li p").eq(i).html(value);
});

Answer 3

只是观察一下：

你的模型有点奇怪......除非真的需要在3个数组中，否则我会选择一个对象文字数组，而不是：

var entries = [ { imgSrc: '...', title: '...', content: '...' }, { imgSrc: '...', title: '...', content: '...' }, { ... } ];
以您的方式克隆和替换单个节点也很慢。您应该考虑在内存中创建所有模板元素并首先在那里进行内容替换，最后将它们全部附加到内存容器中，最后将该容器作为批处理附加到DOM，因为这样会提高性能。 Dan Price建议的东西，但是我会延迟那个ul元素插入事件，因此它是一个批处理。请参阅：http://jsfiddle.net/jchandra/w4jp4qto/或http://jsfiddle.net/jchandra/kpm3tz39/，正在玩大量数据（4000行和8列）。类似于你想要实现的......在香草JS中。
大量的库/框架解决了此模板内容替换问题，例如knockout，react或angular等。看起来它可能是值得的。其中大多数都带有互动教程，可以引导您完成这类工作。

克隆div，然后用数组

3 个答案: