jQuery( ':first' )

jQuery API の jQuery( ':first' ) は、最初に一致した要素だけを選択する。

各親要素内のすべての先頭の子要素を選択したい場合は、jQuery( ':first-child' ) を使う。

記述方法

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

セレクターに一致した要素のうちの、最初に一致した要素だけを選択する。

記述例1

jQuery( 'li:first' )

li 要素のうちの最初の li 要素だけを選択。

記述例2

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

クラス名が「jquery-api-first」の要素のうちの最初の要素だけを選択。

実装例(サンプル)

  • 項目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-first li:first' ) . css( {
        border: '3px red double',
    } );
} );
// -->
</script>

HTML

<ul class="jquery-api-first">
    <li>項目1
        <ul class="jquery-api-first">
            <li>項目1-1</li>
            <li>項目1-2</li>
        </ul>
    </li>
    <li>項目2
        <ul class="jquery-api-first">
            <li>項目2-1</li>
            <li>項目2-2
                <ul class="jquery-api-first">
                    <li>項目2-2-1</li>
                    <li>項目2-2-2</li>
                </ul>
            </li>
            <li>項目2-3</li>
        </ul>
    </li>
    <li>項目3</li>
</ul>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, セレクター, 基本的フィルタ タグ: パーマリンク