jQuery( ':first-child' )

投稿日: 2011年10月3日 作成者: alphasis

jQuery API の jQuery( ':first-child' ) は、各親要素内のすべての先頭の子要素を選択する。

最初に一致した要素だけを選択したい場合は、jQuery( ':first' ) を使う。

記述方法

jQuery( 'セレクター:first-child' )

セレクターに一致した要素のうちの、すべての先頭の要素を選択する。

記述例

jQuery( 'li:first-child' )

li 要素のうちの、すべての先頭の li 要素を選択。

記述例

jQuery( '.jquery-api-first-child li:first-child' )

クラス名が「jquery-api-first-child」の要素の子要素である li 要素のうち、すべての先頭の li 要素を選択。

実装例（サンプル）

  • 項目１
    • 項目１－１
    • 項目１－２
  • 項目２
    • 項目２－１
    • 項目２－２
      • 項目２－２－１
      • 項目２－２－２
    • 項目２－３
  • 項目３

実装例（サンプル）のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '.jquery-api-first-child li:first-child' ) . css( {
        border: '3px red double',
    } );
} );
// -->
</script>

HTML

<ul class="jquery-api-first-child">
    <li>項目１
        <ul class="jquery-api-first-child">
            <li>項目１－１</li>
            <li>項目１－２</li>
        </ul>
    </li>
    <li>項目２
        <ul class="jquery-api-first-child">
            <li>項目２－１</li>
            <li>項目２－２
                <ul class="jquery-api-first-child">
                    <li>項目２－２－１</li>
                    <li>項目２－２－２</li>
                </ul>
            </li>
            <li>項目２－３</li>
        </ul>
    </li>
    <li>項目３</li>
</ul>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, セレクター, 子要素フィルタ タグ: パーマリンク