teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQueryで特定の一意の要素がDOMノードとして存在しているかを確かめる最良の方法

編集履歴

質問編集履歴

5

漏れ

2018/12/18 19:28

投稿

flc
flc

スコア13

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
 
56
56
 
57
- $h1.appendTo( $main );
57
+ $header.appendTo( $main );
58
58
 
59
59
 
60
60
 
@@ -72,7 +72,7 @@
72
72
 
73
73
 
74
74
 
75
- $h1.remove();
75
+ $header.remove();
76
76
 
77
77
 
78
78
 
@@ -104,6 +104,12 @@
104
104
 
105
105
  ```jQuery
106
106
 
107
+ const $main = $('#main');
108
+
109
+ const $header = $('<header><h2>追記</h2></header>');
110
+
111
+
112
+
107
113
  const func = ( $node ) => {
108
114
 
109
115
  //中略
@@ -122,7 +128,7 @@
122
128
 
123
129
 
124
130
 
125
- const $h1 = $header.children('h1');
131
+ const $h2 = $header.children('h2');
126
132
 
127
133
 
128
134
 
@@ -130,7 +136,7 @@
130
136
 
131
137
 
132
138
 
133
- $h1.remove();
139
+ $h2.remove();
134
140
 
135
141
 
136
142
 
@@ -138,6 +144,6 @@
138
144
 
139
145
 
140
146
 
141
- func( $h1 );
147
+ func( $h2 );
142
148
 
143
149
  ```

4

&&

2018/12/18 19:28

投稿

flc
flc

スコア13

test CHANGED
File without changes
test CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
 
114
114
 
115
- if( $closest.length ) {
115
+ if( $main.find( $node ).length && $main.find( $closest ).length ) {
116
116
 
117
117
  $closest.remove(); //エラー
118
118
 

3

エラーについて

2018/12/18 18:50

投稿

flc
flc

スコア13

test CHANGED
File without changes
test CHANGED
@@ -36,11 +36,11 @@
36
36
 
37
37
 
38
38
 
39
- const $h1 = $('<h1>ハロー、ハッピーワールド！</h1>');
39
+ const $header = $('<header><h1>ハロー、ハッピーワールド！</h1></header>');
40
40
 
41
41
 
42
42
 
43
- if( $main.find( $h1 ).length ) {
43
+ if( $main.find( $header ).length ) {
44
44
 
45
45
  console.log("そんなわけない");
46
46
 
@@ -58,7 +58,7 @@
58
58
 
59
59
 
60
60
 
61
- if( $main.find( $h1 ).length ) {
61
+ if( $main.find( $header ).length ) {
62
62
 
63
63
  console.log("そうだよね");
64
64
 
@@ -76,7 +76,7 @@
76
76
 
77
77
 
78
78
 
79
- if( $main.find( $h1 ).length ) {
79
+ if( $main.find( $header ).length ) {
80
80
 
81
81
  console.log("そんなわけない");
82
82
 
@@ -89,3 +89,55 @@
89
89
  }
90
90
 
91
91
  ```
92
+
93
+
94
+
95
+ ### 追記
96
+
97
+
98
+
99
+ 関数の引数として、すでに消えたはずの子要素（上記の場合は h1 ）を渡し、その関数の中で親要素を削除しようとするとエラーになるようです
100
+
101
+ これがどうも回避できずにいます…
102
+
103
+
104
+
105
+ ```jQuery
106
+
107
+ const func = ( $node ) => {
108
+
109
+ //中略
110
+
111
+ const $closest = $node.closest();
112
+
113
+
114
+
115
+ if( $closest.length ) {
116
+
117
+ $closest.remove(); //エラー
118
+
119
+ }
120
+
121
+ };
122
+
123
+
124
+
125
+ const $h1 = $header.children('h1');
126
+
127
+
128
+
129
+ //中略
130
+
131
+
132
+
133
+ $h1.remove();
134
+
135
+
136
+
137
+ //中略
138
+
139
+
140
+
141
+ func( $h1 );
142
+
143
+ ```

2

closest

2018/12/18 18:49

投稿

flc
flc

スコア13

test CHANGED
@@ -1 +1 @@
1
- jQueryで要素がDOMノードとして存在しているかを確かめる最良の方法
1
+ jQueryで特定の一意の要素がDOMノードとして存在しているかを確かめる最良の方法
test CHANGED
@@ -18,7 +18,15 @@
18
18
 
19
19
 
20
20
 
21
+ あるいは逆に
22
+
23
+
24
+
25
+ > $( 探したい要素 ).closest().length
26
+
27
+
28
+
21
- あるいは逆に、探したい要素から見て親があるかどうかを調べたほうがいいとかあったりするのでしょうか？
29
+ のように、探したい要素から見て親があるかどうかを調べたほうがいいとかあったりするのでしょうか？
22
30
 
23
31
 
24
32
 

1

[0]やsize()

2018/12/18 18:15

投稿

flc
flc

スコア13

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,15 @@
10
10
 
11
11
 
12
12
 
13
- 動くことは動くものの若干腑に落ちなさもあり、このやり方しかないのかな？と疑問に想っています。
13
+ 動くことは動くものの若干腑に落ちなさもあり、このやり方しかないのかな？と疑問に思っています。
14
+
15
+
16
+
17
+ [0]や.size()など、いくつかやり方はあるようですが…
18
+
19
+
20
+
21
+ あるいは逆に、探したい要素から見て親があるかどうかを調べたほうがいいとかあったりするのでしょうか？
14
22
 
15
23
 
16
24