jQuery( ':nth-of-type( equation )' )

投稿日: 2013年12月8日 作成者: alphasis

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

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

記述方法（構文）

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

「セレクター」に一致した全ての兄弟要素のうち、「算式」に一致するインデックス番号の要素を全て選択する。

引数

equation / 算式

選択したい要素の順番を算式で指定。

「3n」とした場合、「3」の倍数に一致するインデックス番号の兄弟要素を全て選択する。

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

記述例

jQuery( '.sample p:nth-of-type( 3n )' )

クラス名が「sample」の要素の子孫要素である全ての p 要素の兄弟要素のうち、「3の倍数」に一致するインデックス番号の p 要素を選択。

実装例（サンプル）

段落要素１－１

段落要素１－２

段落要素１－３

段落要素１－４

段落要素１－５

段落要素１－６

段落要素１－７

タイトル

段落要素２－１

段落要素２－２

段落要素２－３

段落要素２－４

段落要素２－５

段落要素２－６

段落要素２－７

  • リスト項目１
  • リスト項目２
  • リスト項目３

段落要素３－１

段落要素３－２

段落要素３－３

段落要素３－４

段落要素３－５

段落要素３－６

段落要素３－７

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '.sample p:nth-of-type( 3n )' ) . css( {
        backgroundColor: 'pink',
    } );
} );
// -->
</script>

HTML

<div class="sample">
    <p>段落要素１－１</p>
    <p>段落要素１－２</p>
    <p>段落要素１－３</p>
    <p>段落要素１－４</p>
    <p>段落要素１－５</p>
    <p>段落要素１－６</p>
    <p>段落要素１－７</p>
</div>

<div class="sample">
    <h4>タイトル</h4>
    <p>段落要素２－１</p>
    <p>段落要素２－２</p>
    <p>段落要素２－３</p>
    <p>段落要素２－４</p>
    <p>段落要素２－５</p>
    <p>段落要素２－６</p>
    <p>段落要素２－７</p>
</div>

<div class="sample">
    <ul>
        <li>リスト項目１</li>
        <li>リスト項目２</li>
        <li>リスト項目３</li>
    </ul>
    <p>段落要素３－１</p>
    <p>段落要素３－２</p>
    <p>段落要素３－３</p>
    <p>段落要素３－４</p>
    <p>段落要素３－５</p>
    <p>段落要素３－６</p>
    <p>段落要素３－７</p>
</div>

<div style="clear: left;"></div>

CSS

<style>
<!--
.sample {
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #FFFFCC;
}
// -->
</style>

スポンサード リンク

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