これらのクラスに一致するすべてのIDをクローンする方法

Question

私はボタンをクリックしてdivにコンテンツを追加するページを作成しています。今、私は3つのボタンを持っています。すべてが少なくとも1つのクラスを持っています。各クラスは、独自のコンテンツを持つ1つのdiv IDに対応しています。私がしようとしているのは、ボタン上にある各クラスを取得し、同じ名前を持つdiv IDを見つけ出し、クローンして#return divに追加します。

ボタンに表示される最初のクラス名のみを複製する作業例があります。どのように私のjQueryボタンのクラスに一致するすべてのdivのIDを見つけることができます、クローンを作成し、それらを#returnに追加しますか？

これらのボタンは同じクラスにすることができますが、#returnでクローンを作成するときには、再びクローンする必要はありません。私はこれを防止しようとするif文を持っていますが、それはそれらを削除してしまいます。どうすればこれをやめることができますか？

私はこのjqueryの作業を示しているここfiddleを持っている：

$(document).ready(function() { 
    $("[id^=button]").click(function() { 
    var myclass = $(this).attr("class").split(" "); 

    if ($(this).is(".a1,.a2,.a3")) { 
     $("div#" + myclass).first().clone().appendTo("#return"); 
    } 

    if ($("#return div#" + myclass).length > 1) { 
     $("#return div#" + myclass + ":last").remove(); 
     } 

    }); 
}); 

Answer 1

問題はmyclassが配列であるということですので、あなたが"div#" + myclassのようなセレクタを作成するための文字列としては、セレクタを作成して終わることを追加するとき"div#a1,a2"それはあなたが望むものではありません。

myclassアレイを繰り返して、各クラスのロジックを実行する必要があります。

でデモを更新しました。この

$(document).ready(function() { 
    $("[id^=button]").click(function() { 
     var myclass = $(this).attr("class").split(" "); 

     if ($(this).is(".a1,.a2,.a3")) { 
      myclass.forEach(function(currentClass) { 
       if ($("#return div#" + currentClass).length == 0) 
        $("div#" + currentClass).first().clone().appendTo("#return"); 
      }); 
     } 
    }); 
}); 

ような何か：答えは言及していないことをhttps://jsfiddle.net/zyech6L3/2/

Answer 2

あなたはクラスが利用可能であるか確認することを反復処理する必要があります。以下のような ：

for(var j=0; j<myclass.length; j++){ 
    $("div#" + myclass[j]).first().clone().appendTo("#return"); 
} 

このフィドルを参照してください。 https://jsfiddle.net/c4soamkr/