jQuery使用数组缩短了这段代码

Question

任何人都可以帮我修改这个jQuery代码吗？

HTML代码:

 <div id="blinker1"><img src="aaa.png" /></div>
 <div id="blinker2"><img src="bbb.png" /></div>
 <div id="blinker3"><img src="ccc.png" /></div>
 <div id="blinker4"><img src="ddd.png" /></div>
 <div id="blinker5"><img src="eee.png" /></div>

jQuery代码:

function smBlink(){
    //blink 3times
    for(i=0;i<3;i++) {
        $("#blinker1, #blinker2, #blinker3, #blinker4, #blinker5").fadeTo('normal', 0.3).fadeTo('normal', 1.0);
    }
};

这些taget ID具有相同的前缀(#blinker),后跟顺序号.我认为数组函数会有所帮助......但我不知道如何.这些div将来会增加或减少.

Answer 1

您可以使用"属性开始 - 使用"选择器:

$("div[id^='blinker']").fadeTo('normal', 0.3).fadeTo('normal', 1.0);

这将允许您根据需要添加/删除具有匹配ID的元素.

如果您能够修改标记,则id使用共享类名替换属性会更有效.然后,您可以使用普通的类选择器:

$(".blinker").fadeTo('normal', 0.3).fadeTo('normal', 1.0);

这种方法意味着选择器引擎可以getElementsByClassName在可用的情况下利用本机功能的速度.