teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【jQuery】引数にthisを渡せない

編集履歴

質問編集履歴

4

修正

2016/03/23 15:57

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -205,3 +205,191 @@
205
205
 
206
206
 
207
207
  ```
208
+
209
+
210
+
211
+
212
+
213
+ ---
214
+
215
+
216
+
217
+ 追記２
218
+
219
+
220
+
221
+ 処理１は動く。処理２は想定の動きにならない。
222
+
223
+ 「直接書いたコード」と「関数を呼び出した場合」で動きが変わる。
224
+
225
+ 文字をremoveできていない。
226
+
227
+
228
+
229
+ ```HTML
230
+
231
+ <!DOCTYPE html>
232
+
233
+ <html>
234
+
235
+
236
+
237
+ <head>
238
+
239
+ <meta charset="UTF-8">
240
+
241
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
242
+
243
+ <style>
244
+
245
+ .aaa {
246
+
247
+ width: 150px;
248
+
249
+ height: 50px;
250
+
251
+ background-color: #EFE;
252
+
253
+ border: solid 1px #CCC;
254
+
255
+ position: absolute;
256
+
257
+ }
258
+
259
+
260
+
261
+ .ddd {
262
+
263
+ width: 150px;
264
+
265
+ height: 50px;
266
+
267
+ background-color: pink;
268
+
269
+ border: solid 1px pink;
270
+
271
+ position: absolute;
272
+
273
+ }
274
+
275
+ </style>
276
+
277
+ </head>
278
+
279
+
280
+
281
+ <body>
282
+
283
+ <label class="aaa">
284
+
285
+ <span class="bbb"></span>
286
+
287
+ <input type="hidden" class="ccc">りんご
288
+
289
+ </label>
290
+
291
+ <br>
292
+
293
+ <br>
294
+
295
+ <br>
296
+
297
+ <label class="aaa">
298
+
299
+ <span class="bbb"></span>
300
+
301
+ <input type="hidden" class="ccc">いちご
302
+
303
+ </label>
304
+
305
+ <br>
306
+
307
+ <br>
308
+
309
+ <br>
310
+
311
+ <label class="aaa">
312
+
313
+ <span class="bbb"></span>
314
+
315
+ <input type="hidden" class="ccc">ぶどう
316
+
317
+ </label>
318
+
319
+ <br>
320
+
321
+ <br>
322
+
323
+ <br>
324
+
325
+ <label class="ddd">
326
+
327
+ <span class="bbb"></span>
328
+
329
+ <input type="hidden" class="ccc">りんご
330
+
331
+ </label>
332
+
333
+ <script>
334
+
335
+ $(function() {
336
+
337
+ $(".aaa").on("click", function() {
338
+
339
+ //処理１。関数に切り出さず、直接書くとエラーにならない
340
+
341
+ // this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data;
342
+
343
+ // test(this);
344
+
345
+
346
+
347
+ //処理２。関数に切り出さず、直接書くとエラーにならない
348
+
349
+ // var txt = $(this).text();
350
+
351
+ // $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }).remove();
352
+
353
+ // $(".ddd").append(txt);
354
+
355
+ test2(this);
356
+
357
+ });
358
+
359
+ });
360
+
361
+
362
+
363
+ //関数に切り出すとエラーになる
364
+
365
+ function test(_this){
366
+
367
+ _this.ownerDocument.querySelector('.ddd').lastChild.data = _this.lastChild.data;
368
+
369
+ }
370
+
371
+
372
+
373
+ //関数に切り出すとエラーになる
374
+
375
+ function test2(_this){
376
+
377
+ var txt = $(_this).text();
378
+
379
+ $(".ddd").contents().filter(function(){ return _this.nodeType === _this.TEXT_NODE }).remove(); //ここがうまくいっていない
380
+
381
+ $(".ddd").append(txt);
382
+
383
+ }
384
+
385
+ </script>
386
+
387
+ </body>
388
+
389
+
390
+
391
+ </html>
392
+
393
+
394
+
395
+ ```

3

修正

2016/03/23 15:57

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -148,8 +148,6 @@
148
148
 
149
149
  $(".aaa").on("click", function() {
150
150
 
151
- var txt = $(this).text();
152
-
153
151
  //処理１。関数に切り出さず、直接書くとエラーにならない
154
152
 
155
153
  // this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data;
@@ -160,7 +158,7 @@
160
158
 
161
159
  //処理２。関数に切り出さず、直接書くとエラーにならない
162
160
 
163
- // $(".ddd").text(txt);
161
+ // var txt = $(this).text();
164
162
 
165
163
  // $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }).remove();
166
164
 

2

修正

2016/03/23 15:31

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,8 @@
38
38
 
39
39
  ```HTML
40
40
 
41
+
42
+
41
43
  <!DOCTYPE html>
42
44
 
43
45
  <html>
@@ -148,17 +150,31 @@
148
150
 
149
151
  var txt = $(this).text();
150
152
 
153
+ //処理１。関数に切り出さず、直接書くとエラーにならない
154
+
151
- // this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data; //関数に切り出さず、直接書くとエラーにならない
155
+ // this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data;
152
156
 
153
157
  test(this);
154
158
 
159
+
160
+
161
+ //処理２。関数に切り出さず、直接書くとエラーにならない
162
+
163
+ // $(".ddd").text(txt);
164
+
165
+ // $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }).remove();
166
+
167
+ // $(".ddd").append(txt);
168
+
169
+ test2(this);
170
+
155
171
  });
156
172
 
157
173
  });
158
174
 
159
175
 
160
176
 
161
- //thisがエラーになる
177
+ //関数に切り出すとエラーになる
162
178
 
163
179
  function test(this){
164
180
 
@@ -166,6 +182,20 @@
166
182
 
167
183
  }
168
184
 
185
+
186
+
187
+ //関数に切り出すとエラーになる
188
+
189
+ function test2(this){
190
+
191
+ var txt = $(this).text();
192
+
193
+ $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }).remove();
194
+
195
+ $(".ddd").append(txt);
196
+
197
+ }
198
+
169
199
  </script>
170
200
 
171
201
  </body>

1

修正

2016/03/23 15:29

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,161 @@
19
19
  このやり方は間違っているのでしょうか？
20
20
 
21
21
  なぜエラーになったのか教えていただけるとありがたいです。
22
+
23
+
24
+
25
+
26
+
27
+ ---
28
+
29
+
30
+
31
+ 追記
32
+
33
+
34
+
35
+ 例えばこのような場合です。
36
+
37
+
38
+
39
+ ```HTML
40
+
41
+ <!DOCTYPE html>
42
+
43
+ <html>
44
+
45
+
46
+
47
+ <head>
48
+
49
+ <meta charset="UTF-8">
50
+
51
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
52
+
53
+ <style>
54
+
55
+ .aaa {
56
+
57
+ width: 150px;
58
+
59
+ height: 50px;
60
+
61
+ background-color: #EFE;
62
+
63
+ border: solid 1px #CCC;
64
+
65
+ position: absolute;
66
+
67
+ }
68
+
69
+
70
+
71
+ .ddd {
72
+
73
+ width: 150px;
74
+
75
+ height: 50px;
76
+
77
+ background-color: pink;
78
+
79
+ border: solid 1px pink;
80
+
81
+ position: absolute;
82
+
83
+ }
84
+
85
+ </style>
86
+
87
+ </head>
88
+
89
+
90
+
91
+ <body>
92
+
93
+ <label class="aaa">
94
+
95
+ <span class="bbb"></span>
96
+
97
+ <input type="hidden" class="ccc">りんご
98
+
99
+ </label>
100
+
101
+ <br>
102
+
103
+ <br>
104
+
105
+ <br>
106
+
107
+ <label class="aaa">
108
+
109
+ <span class="bbb"></span>
110
+
111
+ <input type="hidden" class="ccc">いちご
112
+
113
+ </label>
114
+
115
+ <br>
116
+
117
+ <br>
118
+
119
+ <br>
120
+
121
+ <label class="aaa">
122
+
123
+ <span class="bbb"></span>
124
+
125
+ <input type="hidden" class="ccc">ぶどう
126
+
127
+ </label>
128
+
129
+ <br>
130
+
131
+ <br>
132
+
133
+ <br>
134
+
135
+ <label class="ddd">
136
+
137
+ <span class="bbb"></span>
138
+
139
+ <input type="hidden" class="ccc">りんご
140
+
141
+ </label>
142
+
143
+ <script>
144
+
145
+ $(function() {
146
+
147
+ $(".aaa").on("click", function() {
148
+
149
+ var txt = $(this).text();
150
+
151
+ // this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data; //関数に切り出さず、直接書くとエラーにならない
152
+
153
+ test(this);
154
+
155
+ });
156
+
157
+ });
158
+
159
+
160
+
161
+ //thisがエラーになる
162
+
163
+ function test(this){
164
+
165
+ this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data;
166
+
167
+ }
168
+
169
+ </script>
170
+
171
+ </body>
172
+
173
+
174
+
175
+ </html>
176
+
177
+
178
+
179
+ ```