WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

先日 jQuery コードを書いていて、特定の条件にマッチする要素を抽出するコードを端折って

// style 属性とクラスで絞り込んだ ul オブジェクトを current に代入する
var current = $('ul.sub_menu[style~="block;"]);

と記述した。「class が sub_menu である ul 要素のうち、display が block になっているもの」、にマッチさせるつもりである。(この時の ul 要素には、display スタイル以外のスタイル指定はない。)

ところがこのコード、IE9 以降と Firefox系、Google Chrome 系は意図したように動作するのだが、IE8 だと動作しない。IE8 用に selectivizr.js は導入済みなので、CSS3 セレクタがらみの問題ではない。

で、デバグ中にふと思いついて当該コードの前に

$('ul.sub_menu').each(function () {
	alert($(this).attr('style'));
});

というコードを挿入して各 ul 要素の style 属性を表示してみたら、

• IE8 ⇒ 'display: block'
• IE9 以降、Firefox系、Google Chrome ⇒ 'display: block;'

という結果になった。どうも IE8 は最後のスタイル指定の末尾には「;」を付けないようだ。このため、style~="block;" ではマッチしなかったのだった。しかし、style~="block" と末尾のセミコロンを外すと IE8 では意図したように動作するが、他のブラウザではマッチしないので動作しない。単語マッチの ~= ではなく文字列としての部分マッチ style*="block" にすればどちらも動作するが、今後の拡張性を考えると display: block; 以外にマッチしかねないのでちょっと怖い。

結局スタイル内の項目で絞り込む場合は、「セレクタ1発」ではなく地道にループ展開して

var current;
$('ul.sub_menu').each(function () {
	if ( $(this).css('display') == 'block' )
	{
		current = $(this);
	}
});

のようにキチンと css で処理するのが良さそうだ。