ywork2020.com

Title

指定した配下要素を全て取得する

目次 (INDEX)

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

目次に戻る