jQuery firstとlast最初と最後の要素を取得する
jQuery first最初の要素を取得する
firstメソッドは最初の要素を取得します。
サンプル
$(“セレクタ”).first().メソッド
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(function(){
$(“.botton”).click(function(){
$(“li”).first().css(“color”,”red”)
});
});
</script>
<title>
</title>
</head>
<body>
<input type=”button” value=”botton” class= “botton” >
<div>
<ul>
<li>1</li>
<li >2</li>
<li class=”three”>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
実行結果は最初の要素1が赤くなります。
このコードはセレクタで書き換えることができます。
$(“li:first-child”).css(“color”,”red”)
どちらを使うかは自由です。
jQuery last最後の要素を取得する。
lastメソッドは最後の要素を取得します。
サンプル
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(function(){
$(“.botton”).click(function(){
$(“li”).last().css(“color”,”red”)
});
});
</script>
<title>
</title>
</head>
<body>
<input type=”button” value=”botton” class= “botton” >
<div>
<ul>
<li>1</li>
<li >2</li>
<li class=”three”>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
実行結果は最後の要素5が赤くなります。
このコードはセレクタで書き換えることができます。
$(“li:last-child”).css(“color”,”red”)
どちらを使うかは自由です。
