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

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

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

findメソッド

要素.find( selector/要素 )

jQueryのfindメソッドは、指定の要素から子孫要素を検索できます。
上の図は指定の要素を起点に子要素を検索し一致した子要素の文字の色を赤にします。
以下はjQueryサイトのfindメソッドのリンクです。
http://api.jquery.com/find/

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

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

<div class="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 () {

    $(".div1").find(".p1").css("color", "red");
    //$(".div1 .p1").css("color","red");
  });
</script>

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

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

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

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

<div class = "div2">
	<p >123</p>
	<p class="p1">456</p>
	<p class="p1">78
		<span class="s1">9</span></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() {

		$(".div2").find(".p1 .s1").css("color","red");
	});
</script>

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

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

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

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

<div class="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 () {

    $(".div3").find("input[type='text']").attr("name", "testName1");
  });
</script>

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

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

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

<div class = "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() {

		$('.div4').find("input[type='text']").each(function() {
			$(this).attr("name","testName1")
		})
	});
</script>

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