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 要素の兄弟要素のうちの、２番目の p 要素を選択。
実装例（サンプル）
段落要素１－１
段落要素１－２
段落要素１－３
段落要素１－４
タイトル
段落要素２－１
段落要素２－２
段落要素２－３
段落要素２－４
- リスト項目１
- リスト項目２
- リスト項目３
段落要素３－１
段落要素３－２
段落要素３－３
段落要素３－４
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '.sample p:nth-of-type( 2 )' ) . css( {
backgroundColor: 'pink',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.sample p:nth-of-type( 2 )' ) . css( {
backgroundColor: 'pink',
} );
} );
// -->
</script>
HTML
<div class="sample">
<p>段落要素１－１</p>
<p>段落要素１－２</p>
<p>段落要素１－３</p>
<p>段落要素１－４</p>
</div>
<div class="sample">
<h4>タイトル</h4>
<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>
</div>
<div style="clear: left;"></div>
<p>段落要素１－１</p>
<p>段落要素１－２</p>
<p>段落要素１－３</p>
<p>段落要素１－４</p>
</div>
<div class="sample">
<h4>タイトル</h4>
<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>
</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>
<!--
.sample {
float: left;
margin: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
background-color: #FFFFCC;
}
// -->
</style>