jquery将'x‘个数的图像元素附加到src和class

Question

我有一个目录，里面有590张图片，我的问题是能否单独使用jquery从该目录中提取图像并添加它们，我发现单独使用jquery/javascript是无法完成的。或者，我将图片重命名为1.jpg,2.jpg ... 590.jpg。如何使用jquery将590张图像附加到div中，从而得到应用于src的附加元素的编号为'lq'+numberofappended+'.jpg'，类的编号为'image-'+numberofappended

结果给我留下了下面的内容

<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>

如果我拥有的内容太多，我可以一次追加50张图片，并应用jquery分页，每次到达页面末尾时再加载50张图片。

我个人知道如何在jquery中使用append，但我不知道如何单独追加图像，也不知道如何将其应用于src和类。

Answer 1

这样就可以了；将图像存储在一个数组中，连接它们，然后一次追加所有图像。

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 2

生成图像html的数组。

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

现在，您可以使用以下命令将它们全部添加：

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

或者你可以根据你的UI中最好的(比如滚动事件)来交错加载它们。使用slice()获取要用于append()的数组部分

添加前50：

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

Answer 3

一个for循环应该可以做到这一点，

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

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

输出

<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