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

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

findメソッド

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

サンプル

findメソッドのサンプルです。
ボタン1を押すと、findメソッドを使用して文字の色を変更します。
ボタン2を押すと、findメソッドを使わずセレクタの指定で色を変更します。

あいうえお

かきくけこ

さしすせそ

たちつてと

なにぬねの

コード

上記サンプルのコードです。
13行目は、IDセレクタ(#test1)で25行目を指定し、findメソッドで27行目と29行目の(.aaa)に対してcssメソッドを使用しています。
31行目もクラスは"aaa"ですが、"test1"配下ではないのでCSSメソッドは適用されません。
19行目は、findメソッドを使わずセレクタで13行目と同じ箇所を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのfindのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	// ボタン1を押したとき
	$("#btn1").click(function() {
		// findメソッドで指定
		$("#test1").find(".aaa").css('color','red');
	});

	// ボタン2を押したとき
	$("#btn2").click(function() {
		// findメソッドを使わないで指定
		$("#test1 .aaa").css('color','blue');
	});
});
</script>
</head>
<body >
<div id = "test1">
	<p >あいうえお</p>
	<p class="aaa">かきくけこ</p>
	<p>さしすせそ</p>
	<p >たちつ<span class="aaa">てと</span></p>
</div>
<div class="aaa">なにぬねの</div>
<input type="button" id="btn1" value="ボタン1">
<input type="button" id="btn2" value="ボタン2">
</body>
</html>