Question

这是我在浏览器中可以看到的Html

<div id="mygallery-paginate"> 
    <img src="images/opencircle.png"   data-index="0" data-moveto="0" title="" style="cursor: pointer;">
    <img src="images/opencircle.png"   data-index="1" data-moveto="1" title="" style="cursor: pointer;">
    <img src="images/closedcircle.png" data-index="2" data-moveto="2" title="" style="cursor: pointer;">
    <img src="images/opencircle.png"   data-index="3" data-moveto="3" title="" style="cursor: pointer;">
    <img src="images/opencircle.png"   data-index="4" data-moveto="4" title="" style="cursor: pointer;">
</div>

我想要这样

<div id="mygallery-paginate"> 
    <img src="images/opencircle.png"   class="one" data-index="0" data-moveto="0" title="" style="cursor: pointer;">
    <img src="images/opencircle.png"   class="two" data-index="1" data-moveto="1" title="" style="cursor: pointer;">
    <img src="images/closedcircle.png" class="three" data-index="2" data-moveto="2" title="" style="cursor: pointer;">
    <img src="images/opencircle.png"   class="four" data-index="3" data-moveto="3" title="" style="cursor: pointer;">
    <img src="images/opencircle.png"   class="five" data-index="4" data-moveto="4" title="" style="cursor: pointer;">
</div>

请建议使用必要的CSS / JS

Answer 1

尝试：

var classes = ['one', 'two', 'free']; // add more if need
var i = 0;

$('#mygallery-paginate img').each(function(){
     if(!!classes[i++])
         $(this).addClass(classes[i]);
});

Answer 2

DEMO

var nclasses = ['one','two','three','four','five'];
$('#mygallery-paginate').find('img').each(function(i){
    $(this).addClass(nclasses[i]);
});

Answer 3

您对“将图像应用于图像”有何看法？每个元素的顺序编号？

如何将类应用于通过js在运行时自动生成的图像

3 个答案: