jQueryで指定するCSSの値を出来るだけ短縮

質問

こんにちは。
以下のjQueryコードを出来るだけ短縮・最適化したいです。
for/while文でどうにかできそうな気がしますが、思いつきませんでした。

var icoPos = ($(window).width() / 4);
var pos01 = '-'+icoPos+'px';
var pos02 = '-'+(icoPos*2)+'px';
var pos03 = '-'+(icoPos*3)+'px';

$('li.icon01').css('background-position', '0 0');
$('li.icon02').css('background-position', pos01+' 0');
$('li.icon03').css('background-position', pos02+' 0');
$('li.icon04').css('background-position', pos03+' 0');

$('li.icon05').css('background-position', '0 '+pos01);
$('li.icon06').css('background-position', pos01+' '+pos01);
$('li.icon07').css('background-position', pos02+' '+pos01);
$('li.icon08').css('background-position', pos03+' '+pos01);

$('li.icon09').css('background-position', '0 '+pos02);
$('li.icon10').css('background-position', pos01+' '+pos02);
$('li.icon11').css('background-position', pos02+' '+pos02);
$('li.icon12').css('background-position', pos03+' '+pos02);

$('li.icon13').css('background-position', '0 '+pos03);
$('li.icon14').css('background-position', pos01+' '+pos03);
$('li.icon15').css('background-position', pos02+' '+pos03);
$('li.icon16').css('background-position', pos03+' '+pos03);

回答No.2

fujillin · ベストアンサー

ほとんど同じなのと、ループ内で同じ計算をしてしまっていますが・・・

var icoPos = ($(window).width() / 4);

for(var i=0; i<16; i++){
　var selector = "li.icon" + (i<9?"0"+(i+1):i+1);
　var position = (-icoPos * (i%4)) + "px ";
　　　position += (icoPos * (i/4|0)) + "px";
　$(selector).css("background-position", position);
}

ところで、background-positionの指定ってこれでいいんでしたっけ？
（キャメルケースだったかも…）

お礼

position += (-icoPos * (i/4|0)) + "px";

で完璧でした！ちょっと紐解かないと理解できない箇所もあるので(i%4とか…)、勉強させてもらいます。ありがとうございます。

>ところで、background-positionの指定ってこれでいいんでしたっけ？
クォーテーションを付与しない場合は、キャメルケースですね。

回答No.1

y_free_temp

なにやら複雑ですねぇ
可読性無視で単純にループ化するとこんな感じかなぁ

var icoPos = ($(window).width() / 4);
var pos01 = '-'+icoPos+'px';
var pos02 = '-'+(icoPos*2)+'px';
var pos03 = '-'+(icoPos*3)+'px';

var basePos = [ '0', pos01, pos02, pos03 ];
for ( var i = 0; i < 16; i+=4 ) {
$('li.icon0' + (i + 1)).css('background-position', '0 ' + basePos[i%4]);
$('li.icon0' + (i + 2)).css('background-position', pos01+' ' + basePos[i%4]);
$('li.icon0' + (i + 3)).css('background-position', pos02+' ' + basePos[i%4]);
$('li.icon0' + (i + 4)).css('background-position', pos03+' ' + basePos[i%4]);
}

お礼

回答ありがとうございます！
この状態だとicon01～icon09までしかbackground-positionが付与されないため、改修が必要でした。for(i++)ばかり使ってるので、for(i+=4)とかはちょっとパッと出てこなかったです…勉強になります。ありがとうございます。

ちなみに関係ないどうでもいい情報ですが、俺も12/6生まれですのでなんとなく嬉しかったです。