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

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

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

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

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

$("#div1").find(".p1").css("color","red");

上記例は、ID「div1」を起点にして、findメソッドでその配下のクラス「p1」を指定して文字の色を赤にします。

上記例を使用したサンプルです。
13行目で使用しています。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {
		// findメソッドで指定
		$("#div1").find(".p1").css("color","red");
		//$("#div1 .p1").css("color","red");
	});
	$("#button2").click(function() {
		$("#div1").find(".p1").css("color","black");
	});
});
</script>

1行目のdivタグが親、3行目のPタグが子です。

上記コードを動かして確認できます。ボタン1を押すと「456」が赤い文字になります。

123

456

上記コードの13行目は、14行目のようにfindなしでも記述できます。

$("#div1 .p1").css("color","red");

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

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

$("#div2").find(".p1 .s1").css("color","red");

上記例は、ID「div2」を起点にして、findメソッドでその配下のクラス「p1」のさらに下にあるクラス「s1」を指定して文字の色を赤にしています。

上記例を使用したサンプルです。
14行目で使用しています。

<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">
<input type="button" id="button4" value="ボタン4">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	$("#button3").click(function() {
		// findメソッドで指定
		$("#div2").find(".p1 .s1").css("color","red");
	});
	$("#button4").click(function() {
		$("#div2").find(".p1 .s1").css("color","black");
	});
});
</script>

1行目のdivタグが親、4行目のPタグが子、4行目のspanタグが孫です。

上記コードを動かして確認できます。ボタン1を押すと「9」が赤い文字になります。

123

456

789

findメソッドで引数に属性セレクタを指定する

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

$("#div3").find("input[type='text']").attr("name","testName1");

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

上記例を使用したサンプルです。
12行目で使用しています。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	$("#button5").click(function() {
		// findメソッドで指定
		$("#div3").find("input[type='text']").attr("name","testName1");
	});
	$("#button6").click(function() {
		$("#div3").find("input[type='text']").removeAttr("name");
	});
});
</script>

12行目は、属性タグ("input[type='text']")で2行目を指定しています。

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

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

$('#div4').find("input[type='text']").each(function() {
$(this).attr("name","testName1")
})

上記コードは、ID「div4」を起点にして、findメソッドでその配下のinputのtypeがtextの要素を指定し、eachメソッドでfunction以下を繰り返します。
次の行は、取得した要素の数分、attrメソッドでnameとnameの値を追加しています。

上記例を使用したサンプルです。
14行目で使用しています。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	$("#button5").click(function() {
		// findメソッドで指定
		$('#div4').find("input[type='text']").each(function() {
			$(this).attr("name","testName1")
		})
	});
	$("#button6").click(function() {
		// findメソッドで指定
		$('#div4').find("input[type='text']").each(function() {
			$(this).removeAttr("name")
		})
	});
});
</script>

15行目は、14行目にeachメソッドがあるので、2～4行目を1行ずつ実行します。

findメソッド

要素.find( selector/要素 )

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