回答編集履歴

3

最終修正

2018/10/27 10:52

投稿

退会済みユーザー
test CHANGED
@@ -1,4 +1,8 @@
1
+ コメント欄の仕様を反映させた、最終的なものを載せておきます。
2
+
1
- こんな感じでどうでしょう。
3
+ ~~こんな感じでどうでしょう。~~
4
+
5
+
2
6
 
3
7
 
4
8
 
@@ -14,7 +18,7 @@
14
18
 
15
19
 
16
20
 
17
- // 画像の親取得、クローンします
21
+ // 同グループの画像をクローンします
18
22
 
19
23
  var clonedImgs = $(clickedImg)
20
24
 
@@ -28,9 +32,11 @@
28
32
 
29
33
 
30
34
 
31
- // 画像をhtml上に配置(移動)します
35
+ // 配置場所を空にしたうえで、画像をhtml上に配置します
32
36
 
33
37
  var dest = $('#ImgResult');
38
+
39
+ dest.empty();
34
40
 
35
41
  clonedImgs.forEach(o => dest.append(o));
36
42
 

2

更新しました☆☆

2018/10/27 10:52

投稿

退会済みユーザー
test CHANGED
@@ -4,23 +4,27 @@
4
4
 
5
5
  ```javascript
6
6
 
7
- $('img').on('click', function () {
7
+ $('img').on('click', function (eventObject) {
8
+
9
+
10
+
11
+ // クリックされた画像を取得する
12
+
13
+ let clickedImg = $(eventObject.target);
8
14
 
9
15
 
10
16
 
11
17
  // 画像の親を取得、クローンします
12
18
 
19
+ var clonedImgs = $(clickedImg)
20
+
13
- var imgs = $('.ImgTarget img')
21
+ .closest('.ImgTarget')
22
+
23
+ .find('img')
14
24
 
15
25
  .toArray()
16
26
 
17
- // 直近の親がdivがいいならこれ
18
-
19
- .map(o => $(o).closest("div").clone());
20
-
21
- // 直近の親がなんでもいいならこれ
22
-
23
- //.map(o => $(o).parent().clone());
27
+ .map(o => $(o).clone());
24
28
 
25
29
 
26
30
 
@@ -28,7 +32,7 @@
28
32
 
29
33
  var dest = $('#ImgResult');
30
34
 
31
- imgs.forEach(o => dest.append(o));
35
+ clonedImgs.forEach(o => dest.append(o));
32
36
 
33
37
 
34
38
 

1

修正したよ★

2018/10/27 10:25

投稿

退会済みユーザー
test CHANGED
@@ -8,9 +8,19 @@
8
8
 
9
9
 
10
10
 
11
- // 画像を取得します
11
+ // 画像の親を取得、クローンします
12
12
 
13
- var imgs = $('.ImgTarget img');
13
+ var imgs = $('.ImgTarget img')
14
+
15
+ .toArray()
16
+
17
+ // 直近の親がdivがいいならこれ
18
+
19
+ .map(o => $(o).closest("div").clone());
20
+
21
+ // 直近の親がなんでもいいならこれ
22
+
23
+ //.map(o => $(o).parent().clone());
14
24
 
15
25
 
16
26
 
@@ -18,13 +28,7 @@
18
28
 
19
29
  var dest = $('#ImgResult');
20
30
 
21
- imgs.each((i, o) => {
31
+ imgs.forEach(o => dest.append(o));
22
-
23
- o.remove();
24
-
25
- dest.append(o);
26
-
27
- });
28
32
 
29
33
 
30
34