Question

我想创建一个包含图像标记的div，我想将一个包含许多src图像元素的数组推送到我创建的<img>的源中。
这是我的代码，但它不起作用。

var push = "<div class='card'><img class='front' src=''><img class = 'back' src = 'images/back.png' </div>";

var images = ["images/s1.jpg", "images/s2.jpg", "images/s3.jpg", "images/s4.jpg", "images/s5.jpg", "images/s6.jpg", "images/s7.jpg", "images/s8.jpg"]

for (i = 0; i < 8; i++) {
  $(".content").append(push);
}

var images = $('.card').children('img').map(function() {
  return $(this).attr('src')
}).get()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="content">

  </div>
</div>

Answer 1

假设您有div：

<div id='some_div' class='card'></div>

然后将你的img-s附加到它：

var images = ["images/s1.jpg","images/s2.jpg","images/s3.jpg","images/s4.jpg","images/s5.jpg","images/s6.jpg","images/s7.jpg","images/s8.jpg"]

for(var i=0; i<images.length; i++){
      $('#some_div').append("<img src='"+images[i]+"' />");
}

Answer 2

试试这个：

HTML：

<div class="wrap">
    <div class="content">

    </div>
</div>

JS：

var images = ["images/s1.jpg","images/s2.jpg","images/s3.jpg","images/s4.jpg","images/s5.jpg","images/s6.jpg","images/s7.jpg","images/s8.jpg"]

for(var i=0; i<images.length; i++){
    $('.content').append('<div class="card"><img class="front" src="'+images[i]+'"><img class="back" src="images/back.png"></div>');
}

Answer 3

您的HTML应该在HTML中。无论何时编写带有HTML标记的JavaScript，都应该是一个红旗。

注意：需要<template> support。

HTML：

我们有一个包含<ul>元素的空<template>。我们想要使用ul而不是常规div，因为列表更具语义性和可访问性。对于盲人用户而言，用户代理会提前告诉他们列表中有多少项目，因此如果他们愿意，他们可以跳过。

<div class="wrap">
  <ul class="content">
    <template>
      <li class="card">
        <img class="front" src=""/>
        <img class="back" src="images/back.png"/>
      </li>
    </template>
  </ul>
</div>

JS：

首先我们创建一个空文档片段，我们将其附加到。然后，对于每个图像，我们克隆模板的内容并调整标记（具体来说，设置第一个图像的src属性），然后将该克隆附加到片段。最后，我们将包含其中所有克隆的片段附加到容器列表中。这种技术优于将每个克隆分别附加到列表中，每次都会重新渲染。（重新渲染非常慢。）

/* $ === jQuery */

var images = ["images/s1.jpg","images/s2.jpg","images/s3.jpg","images/s4.jpg","images/s5.jpg","images/s6.jpg","images/s7.jpg","images/s8.jpg"];

var frag = new DocumentFragment();
var template = $('.content > template').get(0).content; // see <https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content>

for(var i = 0; i < images.length; i++) {
  var item = template.querySelector('.card').cloneNode(true);
  $(item).children('.front').attr('src', images[i]);
  frag.append(item);
}

// or you could use `Array#forEach`, if supported
// images.forEach(function (imgsrc) {
//   var item = template.querySelector('.card').cloneNode(true);
//   $(item).children('.front').attr('src', imgsrc);
//   frag.append(item);
// })

$('.content').append(Array.from(frag.children));

#semantics | #accessibility | #interoperability | #performance

如何添加arr包括许多“src”图像到图像标记源

3 个答案: