jQuery :firstで最初のInput要素を操作するサンプル
環境
Google Chrome 111.0.5563.65（Official Build）
Windows 10 Home 64bit
jquery 3.6.3
書式
$(“input:first").css(属性名,値);
最初のInput要素のCSSを変更します
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// ボタンのイベント
$("#chk").click(function(){
//最初のInput要素の取得
$("input:first").css("background","green");
});
});
</script>
</head>
<body>
<p><input type="text" id="cityA" value="tokyo"></p>
<p><input type="text" id="cityB" value="oosaka"></p>
<p><input type="text" id="cityC" value="fukuoka"></p>
<button id="chk">検証</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// ボタンのイベント
$("#chk").click(function(){
//最初のInput要素の取得
$("input:first").css("background","green");
});
});
</script>
</head>
<body>
<p><input type="text" id="cityA" value="tokyo"></p>
<p><input type="text" id="cityB" value="oosaka"></p>
<p><input type="text" id="cityC" value="fukuoka"></p>
<button id="chk">検証</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// ボタンのイベント
$("#chk").click(function(){
//最初のInput要素の取得
$("input:first").css("background","green");
});
});
</script>
</head>
<body>
<p><input type="text" id="cityA" value="tokyo"></p>
<p><input type="text" id="cityB" value="oosaka"></p>
<p><input type="text" id="cityC" value="fukuoka"></p>
<button id="chk">検証</button>
</body>
</html>
実行結果
「検証」ボタンを押すと、最初のinput要素(id="cityA")テキストボックスの入力欄の背景色を緑色にします。