jquery append 'x' number images elements applying 'x' to src and class

Question

I have a directory with 590 pictures and my issue is being able to pull images using jquery alone from that directory and appending them which i have found out can not be done alone using jquery/javascript. alternatively i have renamed the pictures 1.jpg,2.jpg ... 590.jpg . how using jquery can i append 590 images to a div leaving me with the number of the appended element applied to the src being 'lq'+numberofappended+'.jpg' and class being 'image-'+numberofappended

as a result leaving me with the below

<div class="imagecontainer">
<img src="lq/1.jpg" class="image-1"/>
<img src="lq/2.jpg" class="image-2"/>
<img src="lq/3.jpg" class="image-3"/>
...
<img src="lq/590.jpg" class="image-590"/>
</div>

if what I have will be too extensive can i append 50 images at a time and apply a jquery pagination loading another 50 each time i reach the end of the page.

I personally know how to use append in jquery but I don't know how to individually append an image and depending on which append number it is applying it to the src and class.

Answer 1

Make an array of the image html.

var imgs=[];
for( i=1; i<= 590; i++){
    imgs.push('<img src="lq/'+i+'/.jpg" class="image-'+i+'"/>')
}

Now you can add them all with:

 $('.imagecontainer').html(imgs.join(''));

Or you could stagger loading them based on whatever works best in your UI( scroll event for example). Use slice() to get parts of the array to use for append()

Add first 50:

  var first50= imgs.slice(0,50);
 $('.imagecontainer').html(first50.join(''));

Answer 2

Here you go; store the images in an array, join them and append all at once.

var images = [];

for (var i = 1; i <= 50; i++) {
    images.push('<img src="lq/'+i+'.jpg" class="image-'+i+'"/>');
}

$('.imagecontainer').append(images.join('\n'));

Answer 3

A for loop should do the trick,

var images = "";
for (var i = 1; i <= 5; i++) {
    images += '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'
}

$('.imagecontainer').append(images);

Output

<div class="imagecontainer">
    <img src="lq/1.jpg" class="image-1">
    <img src="lq/2.jpg" class="image-2">
    <img src="lq/3.jpg" class="image-3">
    <img src="lq/4.jpg" class="image-4">
    <img src="lq/5.jpg" class="image-5">
</div>

DEMO