javascript - jQuery を使用したテーブルのトラバースとスタイル設定

Question

jQueryを使用して何らかの評価フォームを作成しています。これは基本的に、HTML テーブル形式のグリッドまたはマトリックスです。クリック（および後でホバー）イベントを適用したい2x5のテーブルセルがあります。表のセルをクリックすると、すべての要素が列ごとに収集されます。クリックした列と左側の列 (この選択バーと呼びます) にクラスを適用し、右側の列 (これは nar、「バーなし」の略) からクラスを削除します。

改善の余地はありますが、選考プロセスは理解できたと思います。私が行っている .hasClass() テストに失敗した場合でも、クラスが適用されるだけです。

必要に応じて、いくつかのコード。これが私の静的 HTML テンプレートです。

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio"></td>
    <td class="radio"></td>
    <td class="radio"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail"></td>
    <td class="radio answer-head"></td>
    <td class="radio"></td>
</tr>

そして、これは私の .click() です:

$("td.radio").click(function() {
    var bar = $(this).prevUntil("td.question").andSelf();
    var nar = $(this).nextAll("td.click-head, td.click-tail, td.click");
    var row = $(this).parent();
    var bro = null;
    if (row.hasClass("boss")) {
        bro = row.next("tr.employee").children().eq($(this).index() - 1);
    } else if (row.hasClass("employee")) {
        bro = row.prev("tr.boss").children().eq($(this).index() + 1);
    }
    bar.push(bro.prevAll("td.radio").add(bro));
    nar.push(bro.nextAll("td.click-head, td.click-tail, td.click"));
    bar.each(function(i, e) {
        if ($(e).hasClass("answer-head")) {
            $(e).addClass("click-head");
        } else if ($(e).hasClass("answer-tail")) {
            $(e).addClass("click-tail");
        } else {
            $(e).addClass("click");
        }
    });
    nar.each(function(i, e) {
        $(e).removeClass("click-head").removeClass("click-tail").removeClass("click");
    });
});

問題は、このスクリプトが奇妙なバグを引き起こすことです。つまり、2 行目の最後のテーブル セルをクリックすると、次のようになります。

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail click-head"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click"></td>
</tr>

最初の行の最後のセルには、間違ったクラスが与えられています。私の bar.each() では、現在のセルにクラス .answer-head があるかどうかを確認し、そうでない場合は .click を使用する必要があります。これは何らかの形でオーバーライドされ、とにかく .click-head が与えられます。

なんで？

編集: そして、ここにフィドルがあります: http://jsfiddle.net/tSyLj/ (WebKit 依存: Chrome または Safari...)