Question

我有一个img_urls数组，其中包含2个图片网址。

我使用此数组来循环img标记并使用for循环。

但不是有2张图片，我的输出中有3张图片。

这是我的代码;

var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];

  for (i = 0; i < img_urls.length; i++) {
    $("div").append(
      "<div><img src=' " + img_urls[i] + "'/></div>"
    );
  }

那么，我的代码有什么问题？

JSFIDDLE

Answer 1

添加第一张图片时，会生成一个新的div。然后第二个图像附加到现有div。你应该只有一个目的地div。在主div中添加一个id：

    <div id="container"></div>

-

var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];

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

Answer 2

您需要在主selector中使用id ie class div，因为在下一次迭代发生时，div中包含两个body }}。请检查此fiddle

Answer 3

问题是你有$（＆＃34; div＆＃34;）作为选择器。因此，当您追加第一张图片时，您还会添加新的div。所以下一个图像被附加到两个div。可能你可以为你的div添加id，所以

<div id="test"></div>

...

$("#test").append

Answer 4

原因是你在循环中追加所有内容。

$(function() {

  var img_urls = ["url1", "url2"];


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

Answer 5

你附加到全局div元素，你也附加div，所以生成的html也会附加到生成的div。

这是html，

<div class='test'></div>

这是javascript代码，

$(function() {

var img_urls = ["image_url1", "image_url2"];

var html = '';
for (i = 0; i < img_urls.length; i++) {
 html +=   "<div><img src=' " + img_urls[i] + "'/></div>"
}
$("div.test").append(html);
});

请在这里找working link

我希望这会有所帮助

Answer 6

<div id="container"></div>

for (var i = 0; i < img_urls.length; i++) {
console.log(img_urls.length)
  $("div#container").append(
    "<div><img src=' " + img_urls[i] + "'/></div>"
  );
}

当你追加第一张图片时，你在该div中创建一个div，马被添加，第一个div也被马填充

Answer 7

试试这个并查看Demo

  <div></div>


    $(function() {

  var img_urls = ["http://i.onionstatic.com/avclub/5648/48/16x9/1200.jpg", "https://www.scienceabc.com/wp-content/uploads/2016/05/horse-running.jpg"];

      for (i = 0; i < img_urls.length; i++) {
        $("div").append(
          "<img src=' " + img_urls[i] + "'/> </br>"
        );
      }

    });

使用img src时，for循环超出限制

7 个答案: