回答編集履歴

3

解説を追加

2018/01/13 15:09

投稿

defghi1977
defghi1977

スコア4756

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

回答の参照先についての補足を追加

2018/01/13 15:09

投稿

defghi1977
defghi1977

スコア4756

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についての回答を破棄しました

2018/01/13 13:46

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -68,6 +68,10 @@
68
68
 
69
69
  2)
70
70
 
71
+ NOTE:以下は回答として不完全です.
72
+
73
+
74
+
71
75
  変数宣言部に`+=`演算子を記述したことが不味いのであって, 「文字列結合では`+=`は使用できない」わけではありません. 例えば
72
76
 
73
77