使用Javascript循环创建html内容

Question

我的JS =>

var path = "projelerimiz/otel/balsamo/img/";
var ext = ".jpg";
var i = 1;
var img, item, figure;
for (i; i<=11;i++){     
    item = '<div class="item"></div>';
    $(item).appendTo(".swiper");
    figure = '<figure class="frame"></figure>';
    $(figure).appendTo(".item");
    img = $('<img>'); //Equivalent: $(document.createElement('img'))
    img.attr('src', path + i + ext);
    img.appendTo(".frame");
}

我的HTML =>

<div class="swiper">
</div>

我运行JS代码时看到的内容=>

我所看到的

我在运行JS代码时想要看到的内容=>

我想看看

我只需要用div，img等来循环HTML内容，但是有一些嵌套循环。

谢谢。

Answer 1

当您使用.appendTo(".item"); 与.appendTo(".frame");相同，您可以附加到每个.item元素，而不是刚刚创建的元素.appendTo(".frame");

您可以使用appendTo的“反向”功能

$(item).append(figure)//instead of $(figure).appendTo(".item");
//and
$(figure).append(img);//instead of img.appendTo(".frame");

编辑：

在将图形附加到项目之前，将img附加到图形

Answer 2

appendTo将项目添加到与条件匹配的每个元素中。 我怀疑您只想将新的图形和img元素添加到刚添加的项目中。

Answer 3

$(figure).appendTo(".item");

上面将图附加到页面上的所有.item元素，因此，您需要类似：

$(figure).appendTo(".item:last-child"); //the last .item created
.
.
.
img.appendTo(".item:last-child .frame");

Answer 4

正如jQuery文档所说，

但是，如果有多个目标元素，则将为除最后一个目标之外的每个目标创建插入元素的克隆副本，并返回该新集合（原始元素和克隆）。

那么，是什么你基本上做的是，for循环，要追加的一个foreach迭代item的.swiper DIV和figure到每个.item DIV和img每个.frame身影。 要解决此问题，您可以将代码更改为：

var path = "projelerimiz/otel/balsamo/img/";
var ext = ".jpg";
var i = 1;
var img, item, figure;
for (i; i<=11;i++){     
    item = '<div class="item"></div>';
    $(item).appendTo(".swiper");
    figure = '<figure class="frame"></figure>';
    $(figure).appendTo(item);
    img = $('<img>'); //Equivalent: $(document.createElement('img'))
    img.attr('src', path + i + ext);
    img.appendTo(figure);
}

Answer 5

诀窍不是使用通用的类选择器，而是使用引用刚创建的元素的变量：

  var path = "projelerimiz/otel/balsamo/img/"; var ext = ".jpg"; var i = 1; var $img, $item, $figure; for (i; i <= 11; i++) { $item = $("<div />").addClass("item"); $figure = $("<figure />").addClass("frame"); $img = $("<img />").attr('src', path + i + ext); $item.appendTo(".swiper"); $figure.appendTo($item); $img.appendTo($figure); } 

 .item{ border: 1px solid black; } .frame{ border: 1px solid red; } img{ border: 1px solid green; } 

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

Answer 6

要扩展@ lorenzo-catalano的答案，您可以编写类似以下的代码：

var path = "projelerimiz/otel/balsamo/img/";
var ext = ".jpg";
var i = 1;
var swiper = $('.swiper');
var img, item, figure;

for (i; i<=11;i++){     
  item = $('<div />')
    .addClass('item');

  figure = $('<figure />')
    .addClass('frame')
    .appendTo(item);

  img = $('<img>')
    .attr('src', path + i + ext)
    .appendTo(figure);

  item.appendTo(swiper);
}

为了提高性能，只应在所有项目都已创建后才更新DOM（而不是像现在那样通过循环进行每次迭代）

Answer 7

简单一点

 var path = "projelerimiz/otel/balsamo/img/"; var ext = ".jpg"; var i = 1; var img, item, figure; var items = []; for(i; i <= 11; i++) { item = '<div class="item"><figure class="frame">' + '<img src="' + path + i + ext + '"></figure></div>'; items.push(item); } // for best performance append element outside loop $('.swiper').append(items.join('\\n')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="swiper"> </div>