javascriptの「.clone」で複製するときに、複製する要素を指定する方法

Question

###■目的
javascriptの「.clone」で複製するときに、複製する要素を指定したいです。具体的には、

下記のように「複製ボタン」があるとき、ボタンのあるセクションの要素を複製したい。という目的です。

<section id="A">
「複製する要素」
「複製ボタン」
</section>

<section id="B">
「複製する要素」
「複製ボタン」
</section>

★★ここに要素を複製（sectionBのボタンを押したらsectionBの要素だけを複製したい。）★★

###■現状の問題
現状は次のように、
・複製する要素が指定できていない。
・「複製ボタン」を押すたびに追加されていってしまう。
という問題があります。

☆実際の動作
https://jsfiddle.net/vdavs81a/

☆上のコード

<!-- 【スライダーA】 -->
<section id="A">
<div class="slider">
  <input type="radio" name="slider-a" id="slider-a1" class="slider1" value="a1" checked>
  <input type="radio" name="slider-a" id="slider-a2" class="slider2" value="a2">
  <input type="radio" name="slider-a" id="slider-a3" class="slider3" value="a3">
  <div class="inner_slider">
    <label for="slider-a2"><img src="http://bit.ly/2sNLCTb" class="img1"></label>
    <label for="slider-a3"><img src="http://bit.ly/2FtAkX4" class="img2"></label>
    <label for="slider-a1"><img src="http://bit.ly/2FrhxLM" class="img3"></label>
  </div>
</div>
  <div class="hukusei">複製ボタン</div>
</section>

<!-- 【スライダーB】 -->
<section id="B">
<div class="slider">
  <input type="radio" name="slider-b" id="slider-b1" class="slider1" value="b1" checked>
  <input type="radio" name="slider-b" id="slider-b2" class="slider2" value="b2">
  <div class="inner_slider">
    <label for="slider-b2"><img src="http://bit.ly/2oySzSB" class="img1"></label>
    <label for="slider-b1"><img src="http://bit.ly/2ozsrXV" class="img2"></label>
  </div>
</div>
  <div class="hukusei">複製ボタン</div>
</section>

<!-- 【複製画像】 -->   
<p>▼▼ここに複製▼▼</p>
<div class="linkimg"></div>

/* 【スライダー】のCSS */
.slider {
width: 200px;
height: 150px;
overflow: hidden;
}
.img1 {
position: absolute;
left: 0;
top: 0;
}
.img2 {
position: absolute;
left: 200px;
top: 0;
}
.img3 {
position: absolute;
left: 400px;
top: 0;
}
.img4 {
position: absolute;
left: 600px;
top: 0;
}

.inner_slider {
position: relative;
width: 800px;
left: 0;
top: 0;
transition: all .3s ease-in-out;
}
.inner_slider > img {
  width: inherit;
  height: inherit;
  object-fit: contain;
}

.slider1:checked ~ .inner_slider {
transform: translateX(0);
}
.slider2:checked ~ .inner_slider {
transform: translateX(-200px);
}
.slider3:checked ~ .inner_slider {
transform: translateX(-400px);
}

$(".hukusei").click(function(){
    $("div:first").clone().appendTo(".linkimg");
})

HTMLの構造は変えずに解決したいです。
javascriptお詳しい方、よろしくお願いいたします。m(_ _)m

Answer 1

$(function(){
	$('.hukusei').click(function(){
		var $section = $(this).closest('section');
		var id = $('input[type="radio"]:checked', $section).val();
		var $target = $('label[for="slider-'+id+'"]', $section); //選択されている要素
		
		$('.linkimg')
			.empty() //一回空にする
			.append($target.clone()); //複製
	})
})

動作はこれで行けるかと
CSSを調整しないといけないかもです。

Comments

[退会済みユーザー]

ありがとうございます。

む~、惜しいですね。どうやら、

ラジオボタンで選択中の画像（画像スライダーで表示中の画像）の、一個手前の画像

が複製されてしまうようです。。

[kszk311]

slider-a2　img1
slider-a3　img2
slider-a1　img3
となっています。
連番を振り直したら直ると思います

[退会済みユーザー]

なるほど。ありがとうございます。

実はその連番は、ラジオボタンをスライダー化するために必要な連番でして、振り直すわけにはいかないのです。(>_<)

今回はtkturboさんのご回答をベストアンサーにさせていただきました。
でも、ご回答ほんとうにありがとうございます。感謝です。

Answer 2

これでどうでしょう。

$(".hukusei").click(function(){
  var cloneObject = $(this).parent().find("div:first").clone();
});

追記：
何をもって「cloneできない」と言っているかわかりませんが、当方(Win10xEdge)では下記の書き方でcloneされた画像が結果反映部に表示されています。

<script>
$(document).ready(function(){
	$(".hukusei").click(function(){
	    var cloneObject = $(this).parent().find("div:first").clone();
	    // console.log(cloneObject[0]);
            $(".linkimg").empty(); //貼り付け先を空にする、というのを忘れてました><
	    cloneObject.appendTo($(".linkimg"));
	})
});
</script>

Comments

[退会済みユーザー]

ありがとうございます。
残念ながら(>_<)、そちらでは複製が起こりませんでした。

[退会済みユーザー]

失礼いたしました。

×そちらでは複製が起こりませんでした。
○そちらでは複製されるものの、「複製ボタン」を押すたびに画像が増えていってしまうようです。

でした。

でも、今回の質問の１つめ（複製ボタンのsetcionの画像を複製したい）は解決ですね♪

ありがとうございます！

[退会済みユーザー]

>//貼り付け先を空にする、というのを忘れてました><

おお、できました。ご修正感謝です。お手数おかけしました。完璧です♪♪どうもありがとうございます。

以下、別件で恐縮です。

複製先の画像からラジオボタンを消すためには、

・CSSでdisplaynoneする
・javascript側の操作

のどちらがいいか、ご意見いただけませんでしょうか？

[tkturbo]

「cloneObject.find("input").hide();」←こっちのほうが書くのが楽。

[退会済みユーザー]

なるほど。ありがとうございます。

あと1個だけ、どうしてもできなくて、すみません。m(__)m

$(".linkimg").empty();

が、wordpressでだけ効かないのです。jqueryも下記のように入れ子にしているのですが、どうしてもemptyにならず、追加されてしまうのです。

別の書き方でemptyさせる方法などはございませんでしょうか？

<script>
(function($){
$(document).ready(function(){
$(".hukusei").click(function(){
var cloneObject = $(this).parent().find(".slider").clone();
// console.log(cloneObject[0]);
$(".linkimg").empty();
cloneObject.appendTo($(".linkimg"));
})
});
})(jQuery);
</script>

[tkturbo]

「$(".linkimg").html("")」というやり方も。

[退会済みユーザー]

たびたびありがとうございま！！

やってみたのですけれど、やはり上書きされずどんどん追加されてしまいます。困りました。jsfiddleではできているのに、不思議です。

ひとまず「新しく追加されたやつ以外はdisplaynoneしてね」で無理やり対処しました。笑

「ひょっとしてこれじゃないの？」など、また思いつくことがございましたら、いつでもコメントお待ちしております。

[退会済みユーザー]

また別の問題が…

ご教示いただいたコードで画像がcloneされるとき、、

なぜか参照元のスライダーが、最初に表示されている画像に戻ってしまう現象が起こるのですけれど、これを起こさない方法はございませんでしょうか？

https://jsfiddle.net/vdavs81a/43/
→「複製ボタン」をクリックすると、勝手にスライダーが戻るのです。

なんども本当にすみません。他に頼る人いなくて。。(>_<)