findとは
- ここで説明する find とは次の語句からなるjQueryのメソッドです。
- find
- 読み: ファインド
意味: 見つける、探す、発見する
findメソッドの概要
このメソッドは、呼び出し元の要素が包含している全ての配下要素の中から、 メソッドの引数セレクターに一致する要素を集合させた配列風のjQueryオブジェクトを返します。
構文
サンプルを見る前に構文を確認しておきます。
var ##init[] = $(Selector).find(underSelector);
サンプルコードと実行結果
ここでは、div 要素の配下にある li 要素を取得して、文字スタイルをイタリックに変更します。
サンプルコード: CSS
<style>
.clsListNo1{
background-color: ##lightblue;
list-style: inside;
padding: 1.5em;
}
.clsListNo2{
background-color: ##lightpink;
list-style: inside;
padding: 1.5em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<ul class ="clsListNo1">
<li>List No1-1</li>
<li>List No1-2</li>
<li>List No1-3</li>
</ul>
</div>
<p>
<ul class ="clsListNo2">
<li>List No2-1</li>
<li>List No2-2</li>
<li>List No2-3</li>
</ul>
</p>
<button id="idButton">italic (イタリック)</button>
</script>...</script>
</body>
- 06-12: div (この要素の配下の li 要素を取得して、文字スタイルをイタリックに変更します。)
- 08, 09, 10: li (この li 要素らが find で取得されます。)
- 13-19: p (この要素の配下の li 要素は find で取得されません。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("div").find("li").css("font-style", "italic");
});
</script>
- 02-04: click(function(){処理}) (関数を呼び出します。クリックすると実行される処理を表します。)
- 03: find(セレクター) (呼び出し元の要素はセレクターに該当する要素を見つけます。)
- 補足: (ここでは、リセットについてのコードは省略しています。)
- List No1-1
- List No1-2
- List No1-3
- List No2-1
- List No2-2
- List No2-3