循環追加太多項目

我問了一個關於循環和追加的問題。答案几乎是正確的，但它似乎給很多方面增添了方法。循環追加太多項目

期望的效果如下 -

<div> 
<img class="img1"> 
<img class="img2"> 
</div> 

<div> 
<img class="img2"> 
<img class="img3"> 
</div> 

<div> 
<img class="img4"> 
<img class="img5"> 
</div>

這是我得到的結果 -

我使用JSON和Ajax，但它可能會複雜的事情。基本上我只需要從一個數組中取物品，將它們分成兩部分，並將每一部分放在一個div中。

var counter = -1, 
 
mainTitle, 
 
imgTitle, 
 
imgLink, 
 
slideIndex; 
 

 
function populateCars(carId){ 
 
    $.ajax({ 
 
    type : 'GET', 
 
    url : 'json/data.json', 
 
    data : { 
 
     get_param: 'value' 
 
    }, 
 
    dataType : 'json', 
 
    success : function(data){ 
 
     mainTitle = data.carInfo.title; 
 
     imgTitle = data.carInfo.carName; 
 
     $('.gallery-slider').empty(); 
 
     $('.gallery-sub-slider').empty(); 
 

 
     $('#gallery-head').html(mainTitle); 
 
     $('#gallery-car-type').html(imgTitle); 
 

 
     $.each(data.carImages, function(i){ 
 
     imgLink = data.carImages[i].imgLink; 
 

 
     $('.gallery-slider').append('<div><img src="' + imgLink + '" class="gallery-img" data-tag="' + i + '"></div>'); 
 
     
 
     }); 
 

 
     var divCount = Math.ceil(data.carImages.length/2); 
 
     var firstImgIndex; 
 
     var secondImgIndex; 
 
     var firstImg; 
 
     var secondImg; 
 
     
 
     for (var i = 0; i < divCount; i++) { 
 
     firstImgIndex = i*2; 
 
     secondImgIndex = firstImgIndex + 1; 
 
     
 
     firstImg = data.carImages[firstImgIndex]; 
 
     secondImg = data.carImages[secondImgIndex]; 
 
     
 
     $('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>'); 
 
     $('.sub-gallery-item').append('<img src="' + firstImg.imgLink + '" class="sub-gallery-img" data-tag="' + i + '"><img src="' + secondImg.imgLink + '" class="sub-gallery-img">'); 
 

 
     } 
 

 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
       <div class="gallery-sub-slider"> 
 

 
       </div>

來源

2017-09-04 Darian

這是你可以做什麼

for (var i = 0; i < divCount; i=i+2) { 
 
    $('.gallery-sub-slider').append(`<div class="sub-gallery-item" data-index="${i}"> 
 
    <img src="${data.carImages[i].imgLink}" class="sub-gallery-img" data-tag="${i}"> 
 
    <img src="${data.carImages[i+1].imgLink}" class="sub-gallery-img" data-tag=${i+1}> 
 
    </div>`); 
 
}

我用ES6反向引用變量使用${}。將i的值增加

希望這會對您有所幫助。

來源

2017-09-04 10:48:44 Shiladitya

我的好人！這是完美的，謝謝！ – Darian

在創建新的「.SUB畫廊項目」每次迭代。

比你選擇整個頁面中的所有.sub-gallery-item，並且你添加了2個新的img元素到，其中每個。我想你想把它們添加到新的。

線引起的問題是：

$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>'); 
$('.sub-gallery-item').append('<img src="' + firstImg.imgLink + '" class="sub-gallery-img" data-tag="' + i + '"><img src="' + secondImg.imgLink + '" class="sub-gallery-img">');

你可以把它簡化：

$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"><img src="' + firstImg.imgLink + '" class="sub-gallery-img" data-tag="' + i + '"><img src="' + secondImg.imgLink + '" class="sub-gallery-img"></div>');

來源

2017-09-04 09:59:17

我只需要編輯並清楚說明。對於那個很抱歉。它回來了 – Darian

你基本上是正確的，我在哪裏追加它？ – Darian

循環追加太多項目

回答

相關問題