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>

関連の記事

jQuery 属性値を取得/設定するサンプル(attr)
jQuery 表示を書き換えるサンプル(textとhtml)
jQuery ループ処理を行うサンプル(each)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る