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

jQuery API の jQuery( ':nth-of-type( index )' ) は、兄弟要素うちの index に指定した順番の要素を選択する。

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

記述方法(構文)

jQuery( 'セレクター:nth-of-type( インデックス番号 )' )

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

引数

index / インデックス番号

選択したい要素の順番を数値で指定。

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

記述例

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

クラス名が「sample」の要素の子孫要素である全ての p 要素の兄弟要素のうちの、2番目の p 要素を選択。

実装例(サンプル)

段落要素1-1

段落要素1-2

段落要素1-3

段落要素1-4

タイトル

段落要素2-1

段落要素2-2

段落要素2-3

段落要素2-4

  • リスト項目1
  • リスト項目2
  • リスト項目3

段落要素3-1

段落要素3-2

段落要素3-3

段落要素3-4

実装例(サンプル)のソースコード

JavaScript

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

HTML

<div class="sample">
    <p>段落要素1-1</p>
    <p>段落要素1-2</p>
    <p>段落要素1-3</p>
    <p>段落要素1-4</p>
</div>

<div class="sample">
    <h4>タイトル</h4>
    <p>段落要素2-1</p>
    <p>段落要素2-2</p>
    <p>段落要素2-3</p>
    <p>段落要素2-4</p>
</div>

<div class="sample">
    <ul>
        <li>リスト項目1</li>
        <li>リスト項目2</li>
        <li>リスト項目3</li>
    </ul>
    <p>段落要素3-1</p>
    <p>段落要素3-2</p>
    <p>段落要素3-3</p>
    <p>段落要素3-4</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, セレクター, 子要素フィルタ タグ: パーマリンク