克隆 div，然后用数组填充它们

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

我真的不知道伙计们是否有简单的方法，也不知道我的问题是否符合 Whosebug 规则，但由于我从未同时使用数组和克隆……如果有你的想法会很棒。
谢谢！

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，而不仅仅是其中一个。您一次只需要 select 一个，您可以使用 .eq() 来做到这一点。您还错误地使用了 append - 您不能附加到图像，因为它没有子元素。您需要将其 src 属性设置为图像 URL。对于其他元素类型，您可能希望使用 .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/ or http://jsfiddle.net/jchandra/kpm3tz39/，正在处理大量数据（4000 行和 8 列）。有点类似于你想要实现的......在普通 JS 中。
大量的库/框架已经解决了这个模板内容替换问题，例如 knockout, react or angular，等等。仔细检查一下可能是值得的。其中大部分都带有交互式教程，可以引导您完成此类操作。

克隆 div，然后用数组填充它们

Clone divs, then fill them with arrays

javascript

jquery

clone

frontend