質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2357閲覧

JavaSctipでimg要素(個数は未定)を複製したいです。

ka2ga2

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/10/27 08:50

編集2018/10/27 09:52

###求める機能
クリックした img の .closest() の .ImgTarget の中にある img を全て #ImgResult にコピーするためにはどうしたらいいですか?

html

1<div class="ImgTarget"> 2 <div><img src="http://placehold.jp/cc9999/ffffff/50x50.png"></div> 3 <div><img src="http://placehold.jp/cc1111/ffffff/50x50.png"></div> 4</div> 5 6<div class="ImgTarget"> 7 <section> 8 <main> 9 <div><img src="http://placehold.jp/abc888/ffffff/50x50.png"></div> 10 </main> 11 </section> 12</div> 13 14<hr> 15 16<p>画像が1つなら1つ、2つなら2つをここにコピーしたい。</p> 17<div id="ImgResult"> 18</div>

###試したコード

javascript

1$( 'img' ).on( 'click', function () { 2 3 // 配列に目的の画像たちを入れる 4 var box = []; 5 $( this ).closest( '.ImgTarget img' ).each( function () { 6 var ImgSet = push.box( $( this )[0].outerHTML ); 7 }); 8 9 // 入れた画像をコピーする 10 $( '#ImgResult' ).html( ImgSet ); 11 12});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こんにちは。

別案を考えてみました。

考え方としては

  • .ImgTarget について、その中にある<img>を対象とした処理を書くこと

です。以下は、この考え方によるコードの一例です。

javascript

1$('.ImgTarget').each(function(){ 2 var that = this; 3 $('img', this).click(function() { 4 $('img', that).clone().appendTo('#ImgResult'); 5 }); 6});

上記のコードのサンプルを以下

に上げましたので、お試しください。このサンプルでは、画像の色違いによって、異なる.ImgTarget 内にあることが分かるようにしています。

以上、参考になれば幸いです。

投稿2018/10/27 12:03

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ka2ga2

2018/10/27 12:09

ありがとうございます。これは!シンプルで短くなりましたね。大変勉強になりました。
jun68ykt

2018/10/27 12:19

どういたしまして。お役にたてたようでよかったです????
guest

0

ベストアンサー

コメント欄の仕様を反映させた、最終的なものを載せておきます。
こんな感じでどうでしょう。

javascript

1 $('img').on('click', function (eventObject) { 2 3 // クリックされた画像を取得する 4 let clickedImg = $(eventObject.target); 5 6 // 同グループの画像をクローンします 7 var clonedImgs = $(clickedImg) 8 .closest('.ImgTarget') 9 .find('img') 10 .toArray() 11 .map(o => $(o).clone()); 12 13 // 配置場所を空にしたうえで、画像をhtml上に配置します 14 var dest = $('#ImgResult'); 15 dest.empty(); 16 clonedImgs.forEach(o => dest.append(o)); 17 18 });

投稿2018/10/27 09:44

編集2018/10/27 10:52
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ka2ga2

2018/10/27 09:51 編集

ありがとうございます。 残念ながら目的は「移動」でなく「コピー」です。 そして「コピーしたい img 」は、「クリックした img の .closest() の .ImgTarget の中にある img を全て」です。
退会済みユーザー

退会済みユーザー

2018/10/27 09:57 編集

あっと、ごめんなさい。コピー自体は、removeしなければいいです。closestは考慮してみます。
退会済みユーザー

退会済みユーザー

2018/10/27 10:11

あと~closestの条件がないですがなんでもいいんですか?
ka2ga2

2018/10/27 10:15

removeしなければ?ですか? あと条件について無知ですみません。 目的を言い換えるならば、「クリックした img に『最も近い親要素の .ImgTarget 』の中にある img を全て」となります。 『 最も近い親要素の .ImgTarget 』を意図して質問に書いたコードが『 $( this ).closest( '.ImgTarget img' ) 』の部分です。
退会済みユーザー

退会済みユーザー

2018/10/27 10:25

divはいらず、imgだけですか?コード更新します~
ka2ga2

2018/10/27 10:36 編集

いえ、大丈夫です。先ほどのコードのお蔭さまでできました。 https://jsfiddle.net/b9L8gs21/1/ どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問