在JS中使用共享类动态地按顺序填充图像

dynamically populate images in order with shared class in JS

本文关键字：顺序 填充 图像 动态 JS 共享      更新时间：2023-09-26

我有如下标记方式。我有一个图像文件夹中所有的拇指图像的顺序在'thumb1, thumb2, thumb3'等(但约100)。我想以'thumb1'作为填充拇指类的第一个实例的第一个实例开始填充，然后向下，2,3,4等-但不触及标记。这可以用JS来完成吗，可以检测到订单吗?第一个实例= thumb1?

<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>

假设你的缩略图路径是静态的，你可以这样做:

$('.thumb').each(function(index){
    var src = 'path/to/img/thumb' + index+1;
    var $img = $('<img />').attr('src', src);
    $(this).html($img);
});
  • 遍历每个div类缩略图
  • 使用元素的index来引用图像(+1，因为索引从0开始)
  • 在div中添加新的img元素，路径设置为

代替.html()，你也可以使用.append()或.prepend()将img添加到div。

参考

. each ()

相关文章：