jQuery 子孫要素を検索するサンプル(find)

jQueryの子孫要素を検索するサンプルです。
findメソッドを使用します。

findメソッド
子要素を検索する(find)
孫要素を検索する(find)
findメソッドを使わないで指定(css)

findメソッド

要素.find( selector/要素 )

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

子要素を検索するサンプル(find)

子要素を検索するサンプルです。

123

456

コード

上記サンプルのコードです。

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {
		// findメソッドで指定
		$("#div1").find(".p1").css("color","red");
	});
	$("#button2").click(function() {
		$("#div1").find(".p1").css("color","black");
	});
});
</script>

5行目のボタンをクリックすると11行目が実行されます。
13行目は、findメソッドでID「div1」配下のクラス「p1」を指定して文字色を変更しています。

孫要素を検索するサンプル

孫要素を検索するサンプルです。

123

456

789

コード

上記サンプルのコードです。

<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/1.12.4/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>

6行目のボタンをクリックすると14行目が実行されます。
14行目は、findメソッドでID「div1」配下のクラス「p1」配下のクラス「s1」を指定して文字色を変更しています。

findメソッドを使わないで指定(css)

findメソッドではなくcssで指定するサンプルです。

123

456

コード

上記サンプルのコードです。

<div id = "div3">
	<p >123</p>
	<p class="p1">456</p>
</div>
<input type="button" id="button5" value="ボタン5">
<input type="button" id="button6" value="ボタン6">

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

5行目のボタンをクリックすると11行目が実行されます。
16行目は、CSSのセレクタでID「div1」配下のクラス「p1」を指定して文字色を変更しています。