創建HTML內容的JavaScript循環

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代碼，我所看到=>

what I saw

什麼，我想看看，當我運行JS代碼=>

I want to see

我需要簡單的循環HTML內容的div，IMG等，但也有一些嵌套循環。

謝謝。

Answer 1

appendTo將該項添加到每個匹配條件的元素。我懷疑你只想將新圖和img元素添加到剛剛添加的項目中。

Answer 2

當您使用.appendTo(".item");你追加到每一個.item元素，而不是你剛剛創建的，同樣具有.appendTo(".frame");

可以使用appendTo

的「逆」功能

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

編輯：

追加身影項目之前

追加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時，所有項目已CREA

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>