追加每个div 2个json对象

Question

我想追加两个不同的每个div的JSON项目。在循环json之前清空div，然后追加对象。

但我需要追加两个每格，每个项目必须有所不同。例如， DIV1有IMG1 & IMG2，DIV2具有IMG3 & IMG4等

这是我得到的结果 -

   <div class="gallery-sub-slider"> 

       <div> 
        <img class="img1"> 
        <img class="img2"> 
        <img class="img3"> 
        <img class="img4"> 
        <img class="img5"> 
       </div> 

       <div> 
        <img class="img1"> 
        <img class="img2"> 
        <img class="img3"> 
        <img class="img4"> 
        <img class="img5"> 
       </div> 

      </div> 

但是，这是我需要的结果 -

<div class="gallery-sub-slider"> 

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

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

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

      </div> 

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

而不是通过每个data.carImage循环，可以考虑首先计算的div的数量，您将需要：

var divCount = Math.ceil(data.carImages.length/2) 

通过这些

环：

for (var i = 0; i < divCount; i++) { 
    var firstImgIndex = i*2; 
    var secondImgIndex = firstImgIndex + 1; 

    var firstImg = data.carImages[firstImgIndex]; 
    var secondImg = data.carImages[secondImgIndex]; 

    // create your div now, with your first and second img, but you might have to check that secondImg !== null or undefined 
}