jQuery firstメソッドを使って先頭の要素だけを取得する

2023年1月1日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

構文
var 変数名 = $('セレクタ名’).find('属性’).first();
「first()」メソッドを使うと、同じ階層にある連続した要素の先頭に位置する要素だけを取得します。
書式
var res = $('div要素のID名’).find('li’).first();
findとfirstメソッドを使って最初の子要素だけを検索します。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
　var res = $('#cft').find('li').first();
 console.log(res[0]);
});
</script>
</head>
<body>
<div id="cft">
    <ul>
        <li>東京</li>
        <li>大阪</li>
        <li>福岡</li>
    </ul>
</div>
</body>
</html>

実行結果
「find('li’)」を使って検索したすべてのリスト要素から、先頭の要素だけを抽出します。
コンソールログに下記メッセージを出力します。
<li>東京</li>

jQuery

Posted by arkgame

関連投稿: