回答編集履歴
3
解説を追加
test
CHANGED
@@ -66,6 +66,112 @@
|
|
66
66
|
|
67
67
|
|
68
68
|
|
69
|
+
> また、いただいた回答でcase1はか解決はしたのですが、なぜ変数に格納したDOMをさらにcloneすることで解決するのかがどうしても理解ができません。。
|
70
|
+
|
71
|
+
例えば当初の
|
72
|
+
|
73
|
+
var copy_div_element1='<div class="item"><div>'で変更後が
|
74
|
+
|
75
|
+
var copy_div_element1='<div class="item"><div>'の場合、
|
76
|
+
|
77
|
+
var copy_div_element1='<div class="item"><div>'が格納されるのはdocumentが読み込まれた時点の一回だけかと思ったので、変数に一旦格納することで、DOMを使い回すことができると思いました。
|
78
|
+
|
79
|
+
またcloneしたものをまたcloneしたとしても結局、var copy_div_element1が後者に書き換えられてしまえば、それをcloneしてもそのcloneも書き換えられるのではと思ったのですが、実際には思った通りに動作します。
|
80
|
+
|
81
|
+
本件の変数の中身の動きとcloneの動きがどうしても理解できないなため、大変恐縮なのですが、少しだけアドバイスを頂けませんでしょうか?
|
82
|
+
|
83
|
+
何卒、よろしくお願い申し上げます。
|
84
|
+
|
85
|
+
|
86
|
+
|
87
|
+
解説
|
88
|
+
|
89
|
+
---
|
90
|
+
|
91
|
+
問題が発現するのは`2回目`以降の`copy_div_element1`の`append`です. 以下はイベントによって発生しうる処理を展開したものです.
|
92
|
+
|
93
|
+
|
94
|
+
|
95
|
+
```JavaScript
|
96
|
+
|
97
|
+
//まずはテンプレートとなるノードの初期状態をDOMからcloneして変数に保管
|
98
|
+
|
99
|
+
//本来この内容は触ってはいけない内容である!!!
|
100
|
+
|
101
|
+
//NOTE:元々のDOMはこの後編集され破棄される
|
102
|
+
|
103
|
+
var copy_div_element1=$('#select_inside_amount_1 > div').clone();//(1)
|
104
|
+
|
105
|
+
|
106
|
+
|
107
|
+
//ここで#select_inside_amount_1に対して何らかの編集
|
108
|
+
|
109
|
+
$('#select_inside_amount_1 > div').remove('');//(2)
|
110
|
+
|
111
|
+
$('#select_inside_amount_1').append(copy_div_element1);//(3)
|
112
|
+
|
113
|
+
|
114
|
+
|
115
|
+
//ここで#select_inside_amount_1に対して何らかの編集
|
116
|
+
|
117
|
+
$('#select_inside_amount_1 > div').remove('');//(4)
|
118
|
+
|
119
|
+
$('#select_inside_amount_1').append(copy_div_element1);//(5)
|
120
|
+
|
121
|
+
```
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
- まずあなたはノード`#select_inside_amount_1 > div`をcloneし, 変数`copy_div_element1`に格納しました.このcloneはテンプレートを用意するためのものです.
|
126
|
+
|
127
|
+
- 次にノード`#select_inside_amount_1 > div`に対する編集内容を削除するため, 当該ノード`remove`(2)しテンプレートのノードを`append`(3)しました.
|
128
|
+
|
129
|
+
- もう一度ノード`#select_inside_amount_1 > div`に対する編集内容を削除するため, 当該ノード`remove`(4)しテンプレートのノードを`append`(5)しました.
|
130
|
+
|
131
|
+
|
132
|
+
|
133
|
+
さて, ここであなたは(3)でテンプレートのノード`copy_div_element1`を直接DOMに追加してしまいました. もちろんこの内容は**ユーザーによって中身が書き換えられます**. つまりこれ以降`copy_div_element1`の内容をDOMから`remove`しようがDOMに`append`しようが**初期状態には戻らない**ことになります.
|
134
|
+
|
135
|
+
|
136
|
+
|
137
|
+
そのため, DOMに`append`するノードとして常に`copy_div_element1`からcloneしたものを使わなければならないのです. こうすることでテンプレートの中身を操作させずに済みます.
|
138
|
+
|
139
|
+
|
140
|
+
|
141
|
+
```JavaScript
|
142
|
+
|
143
|
+
//まずはテンプレートとなるノードの初期状態をDOMからcloneして変数に保管
|
144
|
+
|
145
|
+
//NOTE:元々のDOMはこの後編集され破棄される
|
146
|
+
|
147
|
+
var copy_div_element1=$('#select_inside_amount_1 > div').clone();//(1)
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
//ここで#select_inside_amount_1に対して何らかの編集
|
152
|
+
|
153
|
+
$('#select_inside_amount_1 > div').remove('');//(2)
|
154
|
+
|
155
|
+
//cloneしているので, (1)の内容が保たれる
|
156
|
+
|
157
|
+
$('#select_inside_amount_1').append(copy_div_element1.clone());//(3)
|
158
|
+
|
159
|
+
|
160
|
+
|
161
|
+
//ここで#select_inside_amount_1に対して何らかの編集
|
162
|
+
|
163
|
+
$('#select_inside_amount_1 > div').remove('');//(4)
|
164
|
+
|
165
|
+
//cloneしているので, (1)の内容が保たれる
|
166
|
+
|
167
|
+
$('#select_inside_amount_1').append(copy_div_element1.clone());//(5)
|
168
|
+
|
169
|
+
```
|
170
|
+
|
171
|
+
|
172
|
+
|
173
|
+
---
|
174
|
+
|
69
175
|
2)
|
70
176
|
|
71
177
|
NOTE:
|
2
回答の参照先についての補足を追加
test
CHANGED
@@ -68,9 +68,21 @@
|
|
68
68
|
|
69
69
|
2)
|
70
70
|
|
71
|
-
NOTE:
|
71
|
+
NOTE:
|
72
|
+
|
73
|
+
以下は
|
74
|
+
|
75
|
+
> forを使うことで要素を結合させてたいのですがうまくいきません。
|
72
76
|
|
73
77
|
|
78
|
+
|
79
|
+
の部分を見落としていました.
|
80
|
+
|
81
|
+
従って jun68ykt さんの回答を参考として下さい.
|
82
|
+
|
83
|
+
|
84
|
+
|
85
|
+
---
|
74
86
|
|
75
87
|
変数宣言部に`+=`演算子を記述したことが不味いのであって, 「文字列結合では`+=`は使用できない」わけではありません. 例えば
|
76
88
|
|
1
問2についての回答を破棄しました
test
CHANGED
@@ -68,6 +68,10 @@
|
|
68
68
|
|
69
69
|
2)
|
70
70
|
|
71
|
+
NOTE:以下は回答として不完全です.
|
72
|
+
|
73
|
+
|
74
|
+
|
71
75
|
変数宣言部に`+=`演算子を記述したことが不味いのであって, 「文字列結合では`+=`は使用できない」わけではありません. 例えば
|
72
76
|
|
73
77
|
|