Question

Can anybody help me modify this jQuery code shorter?

HTML code:

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

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

These taget IDs have same prefix(#blinker) and followed by sequential numbers.
I think array function would help…but I dont know how.
These divs would be increased or decreased in future.

Answer 1

You could use an “attribute starts-with” selector:

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

This will allow you to add/remove elements with matching IDs as necessary.

If you are able to modify your markup, it would be more efficient to replace the id attributes with a shared class name. You can then use a normal class selector:

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

This approach would mean the selector engine can take advantage of the speed of the native getElementsByClassName function where available.