jQuery API の jQuery( ':last-child' ) は、各親要素内のすべての最後の子要素を選択する。
最後に一致した要素だけを選択したい場合は、jQuery( ':last' ) を使う。
記述方法
jQuery( 'セレクター:last-child' )
セレクターに一致した要素のうちの、すべての最後の要素を選択する。
記述例
jQuery( 'li:last-child' )
li 要素のうちの、すべての最後の li 要素を選択。
記述例
jQuery( '.jquery-api-last-child li:last-child' )
クラス名が「jquery-api-last-child」の要素の子要素である li 要素のうち、すべての最後の li 要素を選択。
実装例(サンプル)
- 項目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-last-child li:last-child' ) . css( {
border: '3px red double',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-api-last-child li:last-child' ) . css( {
border: '3px red double',
} );
} );
// -->
</script>
HTML
<ul class="jquery-api-last-child">
<li>項目1
<ul class="jquery-api-last-child">
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>
<li>項目2
<ul class="jquery-api-last-child">
<li>項目2-1</li>
<li>項目2-2
<ul class="jquery-api-last-child">
<li>項目2-2-1</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>
<li>項目1
<ul class="jquery-api-last-child">
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>
<li>項目2
<ul class="jquery-api-last-child">
<li>項目2-1</li>
<li>項目2-2
<ul class="jquery-api-last-child">
<li>項目2-2-1</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>