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)