jQuery findメソッドで子孫要素を操作する

jQueryのfindメソッドで子孫要素を操作するサンプルです。

サンプル	findメソッド
	子要素を検索して操作する(find)
	孫要素を検索して操作する(find)
	引数に属性セレクタを指定する
	eachで複数の要素を操作する

findメソッド

要素.find( selector/要素 )

findメソッドは、指定の要素から子孫要素を検索できます。
以下はjQueryサイトのfindメソッドのリンクです。
http://api.jquery.com/find/

子要素を検索して操作する(find)

子要素を検索して操作するサンプルです。

<div id = "div1">
	<p >123</p>
	<p class="p1">456</p>
</div>
<input type="button" id="button1" value="ボタン1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		// findメソッドで指定
		$("#div1").find(".p1").css("color","red");
		//$("#div1 .p1").css("color","red");
	});

</script>

12行目は、1行目の「div1」を起点にして、findメソッドでその配下の3行目の子要素の「p1」を指定して文字の色を赤にします。
13行目のようにセレクタに子要素の「p1」を指定すればfindメソッドなしでも操作できます。

結果は以下のようになります。

孫要素を検索して操作する(find)

孫要素を検索して操作するサンプルです。

<div id = "div2">
	<p >123</p>
	<p class="p1">456</p>
	<p class="p1">78<span class="s1">9</p>
</div>
<input type="button" id="button3" value="ボタン3">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button3").click(function() {
		// findメソッドで指定
		$("#div2").find(".p1 .s1").css("color","red");
	});

</script>

13行目は、1行目の「div2」を起点にして、findメソッドで4行目の子要素の「p1」のさらに下にある孫要素の「s1」を指定して文字の色を赤にします。

結果は以下のようになります。

引数に属性セレクタを指定する

引数に属性セレクタを指定するサンプルです。

<div id = "div3">
	<input type="text" value="あいうえお">
</div>
<input type="button" id="button5" value="ボタン5">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button5").click(function() {
		// findメソッドで指定
		$("#div3").find("input[type='text']").attr("name","testName1");
	});

</script>

11行目は、1行目の「div3」を起点にして、findメソッドで子要素の2行目のinputのtypeがtextの要素を指定し、attrメソッドでnameとnameの値を追加しています。
ポイントは、inputの範囲を括るダブルコーテション(")とtextの範囲を括るシングルコーテーション(')です。
ダブルコーテションとシングルコーテーションの位置を逆にしても動作します。

eachで複数の要素を操作する

eachで複数の要素を操作するサンプルです。

<div id = "div4">
	<input type="text" value="赤">
	<input type="text" value="黄">
	<input type="text" value="青">
</div>
<input type="button" id="button5" value="ボタン5">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button5").click(function() {
		// findメソッドで指定
		$('#div4').find("input[type='text']").each(function() {
			$(this).attr("name","testName1")
		})
	});

</script>

13行目は、1行目の「div4」を起点にして、findメソッドで子要素の2行目以下のinputのtypeがtextの要素を指定しています。
eachメソッドで取得した数分、attrメソッドでnameとnameの値を追加しています。