07月18日
jQueryでお手軽CSS制御（Chromeでのバグの話も）
CSSの制御というか、Classの制御というか。
CSSを直接触っちゃうより、Classを用意しておいて付加したり外したりのほうが何かと管理もしやすいでしょ？
JAVASCRIPT:
-
(function($) {
-
$(document).ready(function() {
-
$('#target tr:odd').addClass('odd');
-
});
-
})(jQuery);
targetというIDを持つテーブルの奇数行trにoddというクラスを追加してあげてます。
行数の多いテーブルだと、いちいち奇数行にクラスを指定してやるのも面倒だし、行の入れ替えが発生した日にゃぁ、アンタ。リアルで「キーッ！！！」って叫んじゃうってモンですよ。
Javascriptの使用がOKだったら、とてもとても助かるね。
でも例えば、テーブルが2つ続いてて、それらにも奇数行毎にClassを付加したい場合、単純に考えて…
JAVASCRIPT:
-
$('table tr:odd').addClass('odd');
としてしまうんだけど、1つめのテーブルが奇数行（例として5）で終わってしまった場合、2つめのテーブルのtrは「リセットされて1から」ではなく「5の続きの6から」となってしまい、なぜか偶数行スタート（本来は1だから奇数）になってしまい、具合が悪いことになっちゃうんですね～困る。
（解決法、探り中。末尾に空の<tr></tr>入れちゃうのでもOK。だけど文法的にはNG）
さらにGoogle Chromeで発見した不具合。
複数の要素を指定する時、コンマ（,）でセレクタを区切れば同時に選択できるのですが、
JAVASCRIPT:
-
$('table tr:odd, ul li:odd').addClass('odd');
IEやFirefoxでは意図したとおりの動きになってるんですが、Chromeだけは最初の要素しか識別してくれない。単純な解決方法は、
JAVASCRIPT:
-
$('table tr:odd').addClass('odd');
-
$('ul li:odd').addClass('odd');
2行に分割…orz
うーむ、ちょっと切ないですね…
ちょっと検証が甘いですが、便利なjQueryもちょっとした落とし穴が用意されていますよ…というお話しでした。それでも便利すぎて手から離せないｊQueryなのです。罪なヤツ。
おおぉぉ！
久しぶりにお仕事のお話…
ぼくも早く今、勉強している分野をモノにして
ジェイクエリやA jaｘの勉強をしたいです。
独学だとホントにナカナカ進みません～（涙）
掲載日： 2009年07月18日 8:12 AM by さいとー
> さいとーさん
なかなか技術ネタが無くて肩身が狭いですｗ
プログラムはやはり手を動かしてナンボ、だと思います。その点Javascriptはテキストエディタとブラウザさえあれば作れるし、Firebug使えばデバッグもある程度容易になりますからね～
頑張って下さいねー
掲載日： 2009年07月18日 9:55 AM by 板