CODEWITHSUNDEEP
jqueryhtmljsonajax
user7779924
user7779924

Reputation:

Loop appending too many items

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 -

Screen of result

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>

Upvotes: 0

Views: 109

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

This is what you can do it

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>`);
}

I've used ES6 backtick and for referring to variables use ${}. Increase the i value by 2

Hope this will help you.

Upvotes: 1

Josef Adamcik
Josef Adamcik

Reputation: 5780

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>');

Upvotes: 0

Related Questions