jQuery API の jQuery( ':nth-of-type( even )' ) は、インデックス番号が偶数の兄弟要素を全て選択する。
jQuery( ':nth-of-type( even )' )におけるインデックス番号は、「1」から始まる点に注意。
記述方法(構文)
jQuery( 'セレクター:nth-of-type( even )' )
「セレクター」に一致した全ての兄弟要素のうち、インデックス番号が偶数の要素を全て選択する。
記述例
jQuery( '.sample p:nth-of-type( even )' )
クラス名が「sample」の要素の子孫要素である全ての p 要素の兄弟要素のうち、インデックス番号が偶数である 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( even )' ) . css( {
backgroundColor: 'pink',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.sample p:nth-of-type( even )' ) . 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>
<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>
<!--
.sample {
float: left;
margin: 10px;
padding: 10px;
border: 1px solid gray;
border-radius: 10px;
background-color: #FFFFCC;
}
// -->
</style>