CODEWITHSUNDEEP
javascriptjqueryloops
Sinful
Sinful

Reputation: 151

create html content with Javascript loop

My 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");
}

My HTML =>

<div class="swiper">
</div>

what I have seen when I run the JS code =>

what I saw

what I want to see when I run the JS code =>

I want to see

I need to simply loop HTML content with divs, img, etc but there are some nested loops.

Thank you.

Upvotes: 0

Views: 5757

Answers (6)

ewwink
ewwink

Reputation: 19154

make it simple

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>

Upvotes: 2

bvx89
bvx89

Reputation: 888

To expand on the answer from @lorenzo-catalano, you could write your code something more like this:

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

For performance, you should only update the DOM once when all items have been crea (instead of each iteration through the loop like it does now)

Upvotes: 0

empiric
empiric

Reputation: 7878

The trick is not to use a general class selector but the variable referencing the just created element:

 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>

Upvotes: 0

clabe45
clabe45

Reputation: 2454

As the jQuery docs say,

If there is more than one target element, however, cloned copies of the inserted element will be created for each target except the last, and that new set (the original element plus clones) is returned.

So, what you're essentially doing is, foreach iteration of the for-loop, you're appending item to the .swiper div, and figure to each .item div, and img to each .frame figure. To fix this, you could change the code to:

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

Upvotes: 0

Lorenzo Catalano
Lorenzo Catalano

Reputation: 477

when you use .appendTo(".item"); you append to every .item elements,not the one you just created,same with .appendTo(".frame");

you can use the "inverse" function of appendTo

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

edit:

append img to figure before appending figure to item

Upvotes: 1

Jay Buckman
Jay Buckman

Reputation: 578

appendToadds the item to every element that matches the criteria. I suspect you only want to add the new figure and img elements to the item that you just added.

Upvotes: 0

Related Questions