jQueryのfindメソッドで子孫要素を操作するサンプルです。
目次
サンプル | findメソッド |
子要素を検索して操作する(find) | |
孫要素を検索して操作する(find) | |
引数に属性セレクタを指定する | |
eachで複数の要素を操作する |
findメソッド
要素.find( selector/要素 ) |
- findメソッドは、指定の要素から子孫要素を検索できます。
- 以下はjQueryサイトのfindメソッドのリンクです。
http://api.jquery.com/find/
子要素を検索して操作する(find)
子要素を検索して操作するサンプルです。
<div id = "div1">
<p >123</p>
<p class="p1">456</p>
</div>
<input type="button" id="button1" value="ボタン1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button1").click(function() {
// findメソッドで指定
$("#div1").find(".p1").css("color","red");
//$("#div1 .p1").css("color","red");
});
</script>
12行目は、1行目の「div1」を起点にして、findメソッドでその配下の3行目の子要素の「p1」を指定して文字の色を赤にします。
13行目のようにセレクタに子要素の「p1」を指定すればfindメソッドなしでも操作できます。
結果は以下のようになります。
孫要素を検索して操作する(find)
孫要素を検索して操作するサンプルです。
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button3").click(function() {
// findメソッドで指定
$("#div2").find(".p1 .s1").css("color","red");
});
</script>
13行目は、1行目の「div2」を起点にして、findメソッドで4行目の子要素の「p1」のさらに下にある孫要素の「s1」を指定して文字の色を赤にします。
結果は以下のようになります。
引数に属性セレクタを指定する
引数に属性セレクタを指定するサンプルです。
<div id = "div3">
<input type="text" value="あいうえお">
</div>
<input type="button" id="button5" value="ボタン5">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button5").click(function() {
// findメソッドで指定
$("#div3").find("input[type='text']").attr("name","testName1");
});
</script>
11行目は、1行目の「div3」を起点にして、findメソッドで子要素の2行目のinputのtypeがtextの要素を指定し、attrメソッドでnameとnameの値を追加しています。
ポイントは、inputの範囲を括るダブルコーテション(")とtextの範囲を括るシングルコーテーション(')です。
ダブルコーテションとシングルコーテーションの位置を逆にしても動作します。
eachで複数の要素を操作する
eachで複数の要素を操作するサンプルです。
<div id = "div4">
<input type="text" value="赤">
<input type="text" value="黄">
<input type="text" value="青">
</div>
<input type="button" id="button5" value="ボタン5">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button5").click(function() {
// findメソッドで指定
$('#div4').find("input[type='text']").each(function() {
$(this).attr("name","testName1")
})
});
</script>
13行目は、1行目の「div4」を起点にして、findメソッドで子要素の2行目以下のinputのtypeがtextの要素を指定しています。
eachメソッドで取得した数分、attrメソッドでnameとnameの値を追加しています。
関連の記事
jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
jQuery each()で繰り返し処理を行う