親要素や祖先要素を全て取得するにはjQueryのparents()メソッド を使用します。
parents()とは親要素や祖先要素を全て対象にするメソッドであり、指定したセレクタが一つ上以上の階層で囲まれている要素を全て取得することができます。
parents()メソッドはパラメータに親要素や祖先要素のセレクタを指定することで、指定した親要素や祖先要素を取得することができますが、パラメータ無しで使用すると、指定したセレクタの要素よりも階層が上で囲まれている要素を全て取得するようになります。
また、parents()メソッドとfind()メソッドを組み合わせて使用することで、親要素や祖先要素の特定の要素を取得することもできます。
今回は、jQueryのparents()メソッドを使って親要素や祖先要素を全て取得する方法 について以下の内容で解説していきます。
ハルトさん
今回はjQueryのparents()メソッドで親要素や祖先要素を全て取得する方法について説明していきます。
さとみさん
parents()とは
parents()メソッドとは親要素や祖先要素を全て取得するメソッド となります。
parents()の書き方
parents()の書き方は下記となります。
$ ( "セレクタ" ) . parents ( [ "親要素や祖先要素のセレクタ" ] ) . イベント;
パラメータ
⚫︎ 親要素や祖先要素のセレクタ:
parent()をパラメータに親要素や祖先要素のセレクタを指定して使用することで、パラメータの親要素や祖先要素のセレクタのみを対象とすることができます。
parents()メソッドで親要素や祖先要素を全て取得するサンプルコード
parents()メソッドで親要素や祖先要素を全て取得するサンプルコード紹介します。
パラメータありで親要素や祖先要素を全て取得する場合
パラメータありで親要素や祖先要素を全て取得する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > パラメータありで親要素を取得する< / h2 >
< div class = "parent1" >
ここがp 要素の親要素
< p class = "obj1" > 要素1 - 1 < / p >
< p > 要素2 - 1 < / p >
< p > 要素3 - 1 < / p >
< p > 要素4 - 1 < / p >
< p > 要素5 - 1 < / p >
< p > 要素6 - 1 < / p >
< / div >
< div class = "grandPare2" >
これがp 要素の祖先要素
< div class = "parent2" >
ここがp 要素の親要素
< p class = "obj2" > 要素1 - 2 < / p >
< p > 要素2 - 2 < / p >
< p > 要素3 - 2 < / p >
< p > 要素4 - 2 < / p >
< p > 要素5 - 2 < / p >
< p > 要素6 - 2 < / p >
< / div >
< / div >
< div class = "btn" >
< input type = "button" class = "btn1" value = "obj1の親要素を取得" style = "margin: 20px;" >
< input type = "button" class = "btn2" value = "obj2の親要素を取得" style = "margin: 20px;" >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
style.css
. parent1 , . grandPare2 {
display : inline - block ;
margin - right : 30px ;
border : solid 1px black ;
}
. btn {
display : block ;
}
index.js
$ ( function ( ) {
$ ( ".btn1" ) . on ( "click" , function ( ) {
$ ( ".obj1" ) . parents ( ".parent1" ) . css ( "background" , "yellowgreen" ) ;
} ) ;
$ ( ".btn2" ) . on ( "click" , function ( ) {
$ ( ".obj2" ) . parents ( ".grandPare2" ) . css ( "background" , "skyblue" ) ;
} ) ;
} ) ;
出力結果
parents()メソッドのパラメータに親要素のセレクタを指定することで、指定する要素から見た親要素や祖先要素のセレクタを取得しています。
パラメータ無しで親要素や祖先要素を全て取得する場合
パラメータ無しで親要素や祖先要素を全て取得する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > パラメータ無しで親要素を取得する< / h2 >
< div class = "parent1" >
ここがp 要素の親要素
< p class = "obj1" > 要素1 - 1 < / p >
< p > 要素2 - 1 < / p >
< p > 要素3 - 1 < / p >
< p > 要素4 - 1 < / p >
< p > 要素5 - 1 < / p >
< p > 要素6 - 1 < / p >
< / div >
< div class = "grandPare2" >
これがp 要素の祖先要素
< div class = "parent2" >
ここがp 要素の親要素
< p class = "obj2" > 要素1 - 2 < / p >
< p > 要素2 - 2 < / p >
< p > 要素3 - 2 < / p >
< p > 要素4 - 2 < / p >
< p > 要素5 - 2 < / p >
< p > 要素6 - 2 < / p >
< / div >
< / div >
< div class = "btn" >
< input type = "button" class = "btn1" value = "obj1の親要素を取得" style = "margin: 20px;" >
< input type = "button" class = "btn2" value = "obj2の親要素を取得" style = "margin: 20px;" >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
style.css
. parent1 , . grandPare2 {
display : inline - block ;
margin - right : 30px ;
border : solid 1px black ;
}
. btn {
display : block ;
}
index.js
$ ( function ( ) {
$ ( ".btn1" ) . on ( "click" , function ( ) {
$ ( ".obj1" ) . parents ( ) . css ( "background" , " tomato" ) ;
} ) ;
$ ( ".btn2" ) . on ( "click" , function ( ) {
$ ( ".obj2" ) . parents ( ) . css ( "background" , "gray" ) ;
} ) ;
} ) ;
出力結果
パラメータ無しでparents()メソッドを使用すると、指定したセレクタよりも階層が上で囲まれている要素を全て対象としてしまいます。
そのためボタンを押すと、bodyタグ内の背景色が変化しますが、obj1クラスの要素はgrandPare2クラスで囲まれていない為、grandPare2クラスは対象になりません。
さとみさん
parents()をパラメータ無しで使用すると、全体が対象になってしまうんですね！
ハルトさん
そうですね。
指定する要素の親要素や祖先要素を特定して取得する場合
親要素や祖先要素の特定の要素を取得する場合は、parents()メソッドとfind()メソッド を使用します。
find()メソッドは要素を検索するメソッドとなります。
parents()メソッドで親要素や祖先要素を取得し、find()メソッドで要素を検索すことで親要素や祖先要素の特定の要素を取得することができます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > parents ( ) とfind ( ) 特定の親要素や祖先要素を取得する< / h2 >
< div class = "parent1" >
ここがp 要素の親要素
< p class = "obj1" > 要素1 - 3 < / p >
< p > 要素2 - 3 < / p >
< p > 要素3 - 3 < / p >
< p > 要素4 - 3 < / p >
< p > 要素5 - 3 < / p >
< p > 要素6 - 3 < / p >
< / div >
< div class = "grandPare2" >
これがp 要素の祖先要素
< div class = "parent2" >
ここがp 要素の親要素
< p class = "obj2" > 要素1 - 4 < / p >
< p > 要素2 - 4 < / p >
< p > 要素3 - 4 < / p >
< p > 要素4 - 4 < / p >
< p > 要素5 - 4 < / p >
< p > 要素6 - 4 < / p >
< / div >
< / div >
< div class = "btn" >
< input type = "button" class = "btn1" value = "obj1の親要素を取得" style = "margin: 20px;" >
< input type = "button" class = "btn2" value = "obj2の祖先要素を取得" style = "margin: 20px;" >
< / div >
<script src = "index.js" > </script>
< / body >
<style>
.parent1, .grandPare2 {
display : inline-block ;
margin-right : 30px ;
border : solid 1px black ;
}
.btn {
display : block ;
}
</style>
< / html >
index.js
$ ( function ( ) {
$ ( ".btn1" ) . click ( function ( ) {
$ ( ".obj1" ) . parents ( "body" ) . find ( ".parent1" ) . css ( "background-color" , "gold" ) ;
} ) ;
$ ( ".btn2" ) . click ( function ( ) {
$ ( ".obj2" ) . parents ( "body" ) . find ( ".grandPare2" ) . css ( "background-color" , "purple" ) ;
} ) ;
} ) ;
出力結果
parents()メソッドとfind()メソッドを使用することで特定の親要素や祖先要素を取得しています。
さとみさん
parents()メソッドとfind()メソッドと組み合わせて使用すると、親要素や祖先要素の特定の要素を取得することができるんですね！
ハルトさん
そうですね。
今回のポイント parents()で親要素や祖先要素を全て取得
⚫︎ 指定した要素の親要素や祖先要素を全て取得するにはjQueryのparents()メソッド を使用する
⚫︎ パラメータありでparents()メソッドを使用すると、指定する要素から見た親要素や祖先要素のセレクタを対象 とする
⚫︎ パラメータ無しでparents()メソッドを使用すると、指定したセレクタよりも階層が上で囲まれている要素を全て対象 とする
⚫︎ parents()メソッドとfind()メソッドを使用することで指定する要素の親要素や祖先要素を特定して取得 することができる
関連記事
jQueryのparent()メソッドで親要素を取得する方法 についてはこちらをご参考ください。
2020.10.08
親要素を取得するにはjQueryのparent()メソッドを使用します。
jQueryのparent()とは親要素を取得するメソッドであり、テーブルなどの入り子になっている要素でイベントを起こした際に、一部の要素だけ変更したい場合などに使用されます。
...
jQueryのchildren()メソッドで子要素を取得する方法 についてはこちらをご参考ください。
2020.10.08
子要素を取得するにはjQueryのchildren()メソッドを使用します。
jQueryのchildren()メソッドとは子要素を取得するメソッドであり、テーブルなどの入り子になっている要素でイベントを起こした際に、一部の要素だけ変更したい場合などに使用されます。
...
jQueryのcontents()メソッドで全ての子要素/テキスト要素を取得する方法 についてはこちらをご参考ください。
2020.11.26
全ての子要素/テキスト要素を取得するにはcontents()を使用します。
contents()とは、全ての子要素/テキスト要素を取得すメソッドであり、指定した要素の中にある要素やテキストをや、iframe内の要素やテキスト要素などを取得することができます。
...
Writer
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
