は同じクラスで、他の複数の要素に同じクラスで複数の要素を配布するためにいくつかの助けを必要とし、同じクラス

Question

こんにちはと他の要素に同じクラスで複数の要素を配布します。私はおそらくこれを助けることができる.appendToと思う。

は、私はこれらの移動先： ...

<div class="button"> 
... 
</div> 

<div class="button"> 
... 
</div> 

<div class="button"> 
... 
</div> 

これらに：最初に 最初のボタン：私はこれらを持っているので、 ...

<div class="button_place"> 
... 
</div> 

<div class="button_place"> 
... 
</div> 

<div class="button_place"> 
... 
</div> 

button_placeなど...

<div class="button_place"> 
    <div class="button"> 
    ... 
    </div> 
</div> 

<div class="button_place"> 
    <div class="button"> 
    ... 
    </div> 
</div> 

<div class="button_place"> 
    <div class="button"> 
    ... 
    </div> 
</div> 

Answer 1

両方のセット、1セット以上のループを選択し、他のセットに追加します。

var buttons = $(".button"), 
 
    places = $(".button_place"); 
 

 
buttons.each(function(i, elem) { 
 
    places.eq(i).append(elem) 
 
})

.button_place { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button"> 
 
    b1 
 
</div> 
 

 
<div class="button"> 
 
    b2 
 
</div> 
 

 
<div class="button"> 
 
    b3 
 
</div> 
 

 
<div class="button_place"> 
 

 
</div> 
 

 
<div class="button_place"> 
 

 
</div> 
 

 
<div class="button_place"> 
 

 
</div>

Answer 2

すべてのボタンと場所を選択します。次に、ボタンを反復し、対応する場所のコンテナに追加します。

jQueryのバージョン：

const $places = $('.button_place') 

$('.button').each(function(i) { 
    $places[i].appendChild(this) 
}) 

ピュアJSバージョン：

const buttons = document.querySelectorAll('.button') 
const places = document.querySelectorAll('.button_place') 

buttons.forEach(function(button, index) { 
    places[index].appendChild(button) 
}) 
// NodeList.prototype.forEach is not supported in IE, 
// convert NodeList to array first with slice, Array.from, etc. 

Answer 3

単に$('.button_place')のeach() .AND append($('.button').eq(a).clone()).html()そのbutton

$('.button_place').each(function(a, b) { 
 
    $(this).append($('.button').eq(a).clone()).html() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button"> button</div> 
 
<div class="button"> button</div> 
 
<div class="button"> button</div> 
 

 

 

 
<div class="button_place">button_place</div> 
 
<div class="button_place">button_place</div> 
 
<div class="button_place">button_place</div>

のouterhtmlを取得するために使用して使用します

Answer 4

あなたは、各機能を使用してそれを行うことができます：あなたはあなたがしたい場合は、追加コンテンツを交換して使用したい場合は

https://jsfiddle.net/o2gxgz9r/6623/

$(".button_place").each(function(index,elem){ 
//$(elem).html($(".button").eq(0)); 
$(elem).append($(".button").eq(0)); 
}) 

使用のHTML機能最後にコンテンツを追加する。