2

これは通常、非常に簡単なことなので、そのような質問に反対票を投じる前に、私に聞いてください:)

私の問題は、要素を選択してクラスを追加することではなく、そのテーブルに対して偶数行または奇数行に代替クラスを追加することです。

今私はこれを使用しています：

jQuery(document).ready(function(){

jQuery('table.rep tbody > tr td:first-child').addClass('composer');
jQuery('table.rep tbody > tr td:last-child').addClass('pieces');
jQuery('table.rep tbody > tr:odd').addClass('alt');

});

問題は、jQueryが「rep」クラスを持つすべてのテーブルからすべての行を選択し、そのセットの奇数行に「alt」クラスを追加していることです。

私が言ったように、各テーブルに関連する偶数/奇数行にクラスを適用させたいので、最初の行は常に同じスタイルになります。上記のコードを使用しているため、最初の行は、前のテーブルの行数に基づいてalt/normalのいずれかになります。

どういうわけか.each()関数を使うことを考えていましたが、jQueryのドキュメントを調べた後、目的の結果を達成する方法を見つけることができませんでした。

私はそれがこのように見えるかもしれないと思っています：

jQuery('table.rep').each(function(){
    /* select/filter odd rows from this set and add alt class */
});

だから私の質問は、.each()そのように使用できるかどうか、もしそうなら、各反復の結果にドリルダウンして、私が望むことを実行させる方法です。

4

2 に答える 2

2

ここにいます.each():)

jQuery("table.rep").each(function(i,e)
            {
                $(e).find("tr:odd").addClass("alt");
            });
于 2012-06-18T17:36:31.427 に答える
0

どうぞ..！$(...).length は、フィルターまたはトラップ内に要素がいくつあるかを調べるための鍵となることを常に覚えておいてください... :-)

Javascript:

jQuery(document).ready(function()
{
    $('table.rep tbody > tr td:first-child').addClass('composer');
    $('table.rep tbody > tr td:last-child').addClass('pieces');
    $('table.rep').each(function()
    {
       //alert($(this).children('tbody').children(':odd').length)
       $(this).children('tbody').children(':odd').addClass('alt');
    });

});

HTML

<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>

    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>

CSS

.composer {
    color:blue;
}
.pieces {
    color:green;
}
.alt {
    background-color:#ddd;
}
body {
    font-family:tahoma
}
.rep td {
    padding:2px;
}

HTML の追加を避けることもできましたが、この投稿 (回答) を自己完結型にするために、ここに追加しています。

jsfiddle でデモを表示できます: http://jsfiddle.net/dharmavir/HfwqH/

于 2012-06-18T17:57:17.807 に答える