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

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

子孫要素を検索するサンプル
findメソッド

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

子孫要素を検索するサンプルです。
ボタン1を押すと、findメソッドで子孫要素を検索して文字の色を変更します。
ボタン2を押すと、findメソッドを使わずCSSのセレクタで子孫要素を検索して文字の色を変更します。

あいうえお

かきくけこ

さしすせそ

たちつてと

なにぬねの

コード

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

<div id = "div1">
	<p >あいうえお</p>
	<p class="p1">かきくけこ</p>
	<p>さしすせそ</p>
	<p >たちつ<span class="p1">てと</span></p>
</div>
<div class="div2">
	<p class="p1">なにぬねの</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() {
		// findメソッドを使わないで指定
		$("#div1 .p1").css('color','blue');
	});
});
</script>

19行目は、IDセレクタ(#div1)で1行目を指定し、findメソッドで3行目と5行目の(.p1)に対してcssメソッドを使用しています。
8行目にもクラスの(.p1)はありますが、(#div1)配下ではないのでCSSメソッドは適用されません。
24行目は、findメソッドを使わずCSSの子孫要素を指定するセレクタで19行目と同じ箇所を指定しています。

findメソッド

jQueryのfindメソッドです。
現在の場所から子孫要素を検索できます。
以下はjQueryサイトのfindメソッドのページです。
http://api.jquery.com/find/