ども。鉄王です。

先日のエントリーでも紹介した、現在構築中のサイト。jQueryもふんだんに取り入れていまして（もっぱらCSSを柔軟に設定する用途で）、jQueryの定義ファイルも過去最高の分量になっています。

さて、jQueryを使ってCSSを設定する上で、今までちょっと困ったことが起きてました。

長くなっちゃうんです。1行が。

セレクタを複数列記してプロパティを一括指定するとき（1）とか、逆に指定するプロパティがやたらと多いとき（2）とか。で、もう少し可読性を高めたいなあといろいろ調べてましたら、なんともありがたい解決策にたどり着いたわけです。

（1）は \（バックスラッシュ）で複数行を記述、（2）はプロパティと値をハッシュで記述すればOKという話。たとえばこんなコードがあったとすると。

$(’#hoge .fuga, #foo .bar, #spam .ham’).css(’font-size’ , ’1em’);
$(’#hoge .fuga, #foo .bar, #spam .ham’).css(’line-height’ , ’1.4em’);
$(’#hoge .fuga, #foo .bar, #spam .ham’).css(’letter-spacing’ , ’0.1em’);

これじゃあまりに冗長すぎ。セレクタも一列に並んでるんでチト読みづらい。で、こうなると。

$(’#hoge .fuga,\
   #foo .bar,\
   #spam .ham\
‘).css({
   ’font-size’ : ’1em’,
   ’line-height’ : ’1.4em’,
   ’letter-spacing’ : ’0.1em’
});

JavaScriptのお作法がわかってる方だったら当たり前の話なのかもしれないのですが、ちょっと驚きと喜びがあったので紹介した次第です。

参考になったのは↓のサイト。多謝です。

複数行に渡る文字列をバックスラッシュで連結できるって知らなかった - 雑用系
http://d.hatena.ne.jp/nagaton/20070212/1171209754