IE6, 7, 8でJavaScriptがうまく動いてくれない

May 07, 2010 19:34 | @技術/プログラミング

こういうコード書いてます。

function getAttrName(attrObj) {
    var attrName = attrObj.firstChild.data;
//  items = document.getElementsByClassName('item');
    var items = $('li.item');
    $(items).fadeOut('slow');
    for (var i = 0; i &lt; items.length; i++) {
    //  var keywordList = items[i].getElementsByClassName('keyword-list');
        var keywordList = $('.keyword-list', items[i]);
        for (var j = 0; j &lt; keywordList.length; j++) {
            //var keywords = keywordList[j].getElementsByTagName('li');
            var keywords = $('li', keywordList[j]);
            for (var k = 0; k &lt; keywords.length; k++) {
                if (attrName == keywords[k].textContent) {
                    $(items[i]).fadeIn('slow');
                }
            }
        }
    }
    getCurAttr(attrName);
}
function getCurAttr(attrName) {
    var curAttr = $("#keySelector li a");
    for (var l = 0; l &lt; curAttr.length; l++) {
        if ($(curAttr[l]).text() == attrName) {
            $(curAttr[l].parentNode).addClass('current-keyword');
        } else {
            $(curAttr[l].parentNode).removeClass('current-keyword');
        }
    }
}

やりたいことは以下のような感じ。

onclickで attrObj が getAttrName に渡される
クリックされた文字列を attrName に格納
すべての item をjQueryを使って非表示
item の中の ul.keyword-list li 内のテキストに一致したらjQueryで表示

Firefox/Safari/Operaでは問題なく動く。しかしIEが全滅。最初は getElementByClassName とか使ってるからかと思ってたけど、その辺のやつをコメントアウトしてjQueryセレクタを使ってオブジェクトを取得するようにしてもダメ。なんかループの処理とかが怪しいんじゃないかと思ってる。ループ処理もjQueryに書き換えようかな。

ブラウザ間の挙動の違いを吸収してくれるライブラリはまじですごいしありがたいのですが、結局IEちゃんでは動かせない。歯がゆいな。

サーバーサイドで実装する方法もないではないけど、

いじる部分が広範囲になりめんどい（新たなバグが発生するかも）
大した機能じゃないのに大手術したくない
ずっとPHPばっかり触ってるのはつまらん

などという理由により期限ぎりぎりまでJavaScriptで粘ってみたいです。

追記

"Twitterでcxxさんに教えてもらった":http://twitter.com/cxx/status/13545498622 んだけど、IEにはtextContetはないそうです。恥ずかしい。

そういうわけで

var keywords = $('li', keywordList[j]);

を

var keywords = $('li a', keywordList[j]);

とし、

if (attrName == keywords[k].textContent)

を

if (attrName == keywords[k].firstChild.data)

にしてみたところ、ばっちりIEで動くようになった。

cxxさんありがとうございます。今度焼き肉デートしましょう。