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

jQuery

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

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

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

年収訴求

jQueryのparent()、parents()メソッドとは?

jQueryの「parent()」メソッドは、「セレクタで指定した要素の親要素を取得」することが出来ます。そして、もう1つの「parents()」メソッドは、「セレクタで指定した要素の親要素を全て取得」することが出来ます。

つまり、この2つのメソッドの違いは、取得できる親要素の範囲が違うことです。

なお、parents()メソッドの引数に、値を指定しない場合は、セレクタの親要素全てが対象となります。

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

jQueryのparent()、parents()メソッドの簡単な特徴。

  • 要素を取得する方法。
  • 指定したセレクタの親要素が対象。
  • parent()は、1つ上の親要素を取得。
  • parents()は、1つ上以上の親要素を取得
  • parent(引数)、parents(引数)と記述する

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

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

解説なのですが、今回は、parent()、parents()の2つがあるので、parent()→parents()の順番で解説していきます。

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

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

主に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 id="beef-part">
			<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(){
$("#sirloin").parent().css("color","red");
});
</script>
</body>
</html>

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

この記述の場合は、「liタグでidが「sirloin」の1つ上の親要素である、ulを取得し、赤文字にする」という命令が下されています。

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

ulタグである、idがbeef-partに囲まれているliタグが赤くなっているのが分かりますね。

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

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

次に、parants()メソッドを例とコードを使って、解説していきます。使うコードは、先程と同じコードを使います。

<!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 id="beef-part">
			<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(){
$("#sirloin").parent().css("color","red");
});
</script>
</body>
</html>

注目して欲しい部分は、先程と同じ、24行目です。24行目の解説と致しましては、「liタグでidが「sirloin」の親要素全てを取得し、赤文字にする 」という命令が下されています。

結果は、下のようになります。

全て赤文字になり、少しわかりにくい変化になりましたが、簡単に解説しますと、親要素全てなので、こういう結果になりました。

取得した親要素の子孫要素も対象となります。

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

jQueryのparent()、parents()メソッドのまとめ

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

parent()メソッドは、セレクタの1つ上の親要素を取得、parents()メソッドは、セレクタの親要素全てを取得するメソッドとなります。

似ているので、分かりにくいですが、お互いの特性を間違えないように使い分けましょう

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

年収訴求

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