jQuery API の jQuery( 'prev ~ siblings' ) は、「prev」セレクターで指定した要素を兄に持ち、尚且つ、「siblings」セレクターの指定に該当するすべての弟要素を選択する。
記述方法
jQuery( '兄要素 ~ 弟要素' )
prev(兄要素)も、siblings(弟要素)も、「id」「class」「*」などのセレクターで指定する。
実装例(サンプル)
- 項目1
- 項目1-1
- 項目1-2
- 項目2
- 項目2-1
- 項目2-2
- 項目2-2-1
- 項目2-2-2
- 項目2-3
- 項目3
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '.jquery-api-prev ~ li' ) . css( {
margin: '5px',
border: '3px red double',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-api-prev ~ li' ) . css( {
margin: '5px',
border: '3px red double',
} );
} );
// -->
</script>
HTML
<ul id="jquery-api-ul">
<li class="jquery-api-prev">項目1
<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>
<li>項目2
<ul>
<li>項目2-1</li>
<li class="jquery-api-prev">項目2-2
<ul>
<li>項目2-2-1</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>
<li class="jquery-api-prev">項目1
<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>
<li>項目2
<ul>
<li>項目2-1</li>
<li class="jquery-api-prev">項目2-2
<ul>
<li>項目2-2-1</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>