jQueryのfind()メソッドとは?使い方も解説![例とコードで解説]

jQuery

こんにちは!ソウシ(@gomaio2018)と申します!

今回は、jQueryの要素を取得するメソッドを紹介します。

そのメソッドの名は、「find()メソッド」です。この解説では、例とコードを使って分かりやすく解説していきます。

テックキャンプ

jQueryのfind()メソッドとは?

jQueryのfind()メソッドは、「すべての子孫要素(自分よりも下の階層の要素すべて)の中から、指定したセレクタを持つ要素を取得」することが出来ます。

指定した、セレクタの要素の子孫要素すべてを取得できるので、幅広い範囲の指定が可能なメソッドとなります。

なお、取得したい要素は、find()メソッドの引数に記述する必要性があります。

記述の仕方は、「find(引数)」となります。

jQueryのfind()メソッドの簡単な特徴。

  • 要素を取得する方法。
  • 指定したセレクタの全ての子孫要素が対象
  • find(引数)と記述する

では、実際に次からは、コードを使って解説していきます。

jQueryのfind()メソッドを例とコードで解説

下のコードは、少し長いですが、今回、find()メソッドを解説するにあたって、使うコードになります。

主にulタグとliタグで構成されています。

<!DOCTYPE html>
<html lang=ja>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheet.css">
	<title></title>
</head>
<body>
<h1 id="title1">肉の種類</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<ul>
		<li id="sirloin">サーロイン</li>
		<li id="tongue">タン</li>
	</ul>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$("#meet").find("li").css("color","red");
});
</script>
</body>
</html>

注目して欲しい場所は、24行目です。

この記述の場合は、「idであるmeetの子孫要素である、li要素を全て取得し、文字の色を赤色にする」という命令が下されています。

実際に、文字の色が変わっているのか、下の画像で分かります。

全てのliタグ要素が赤くなっているのが分かります。

このようにして、「find()」メソッドは、「セレクタで指定した要素の、子孫要素を取得できる」ことが分かります。

jQueryのfind()メソッドのまとめ

今回は、「jQueryのfind()メソッド」について解説しました。

findメソッドは、要素を取得できるメソッドで、広範囲に渡って、要素を取得するときに使うことが望まれます。

よく使う、メソッドなので是非、覚えて行ってくださいね!

テックキャンプ

人気記事プログラミングスクールである「TECH::EXPERT」が素晴らしくオススメな理由[あの有名人も絶賛!]