使用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>