jQuery( ':nth-child( equation )' )

投稿日: 2011年10月7日 作成者: alphasis

jQuery API の jQuery( ':nth-child( equation )' ) は、equation に指定した算式に一致するインデックス番号の子要素を選択する。equation（算式）を、「3n」とした場合、「3」の倍数に一致するインデックス番号の子要素を選択する。

jQuery( ':nth-child( equation )' ) におけるインデックス番号は、「1」から始まる点に注意。

記述方法

jQuery( 'セレクター:nth-child( 算式 )' )

「セレクター」に指定した要素が、「算式」に指定した算式に一致するインデックス番号の子要素であれば、選択する。

算式（equation）記述例

jQuery( 'セレクター:nth-child( 3n )' )

「セレクター」に指定した要素が、「3」の倍数に一致するインデックス番号の子要素であれば、選択する。

実装例（サンプル）

セル セル セル
セル セル セル
セル セル セル
セル セル セル
セル セル セル
セル セル セル
セル セル セル

実装例（サンプル）の動作について

「toggle」ボタンをクリックすると、インデックス番号が「3」の倍数にあたる行（tr要素）の背景色が、ピンク色に変わる。

「toggle」ボタンを再度クリックすると、インデックス番号が「3」の倍数にあたる行（tr要素）の背景色が、黄色に戻る。

実装例（サンプル）のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-toggle' ) . toggle(
        function () {
            jQuery( '#jquery-api-nth-child tr:nth-child( 3n )' ) . css( {
                backgroundColor: 'pink',
            } );
        },
        function () {
            jQuery( '#jquery-api-nth-child tr:nth-child( 3n )' ) . css( {
                backgroundColor: 'yellow',
            } );
        }
    );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-nth-child tr {
    background-color: yellow;
}
-->
</style>

HTML

<button id="jquery-api-toggle">toggle</button>
<table id="jquery-api-nth-child">
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, セレクター, 子要素フィルタ タグ: パーマリンク