循环追加过多项目

Question

I asked a question on looping and appending. The answer was almost right, yet it seems to append way to many.

The desired effect is as follow -

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

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

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

This is the result I am getting -

I am using json and ajax, but it might complicate things. Basically I just need to take items from an array, split them in two and put each pair in a 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>

</div>

Answer 1

In each iteration you create new ".sub-gallery-item".

Than you select all .sub-gallery-item in whole page and you add 2 new img elments into each of them. I suppose you want to add them just into the new one.

Line causing the problem are:

$('.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">');

You can simplify it:

$('.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>');