将具有相同类的多个元素分发给具有相同类的其他元素

Question

Hello need some help to distribute multiple elements with same class to other multiple elements with same class. I think maybe .appendTo can help with this.

I want to move these: ...

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

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

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

into these: ...

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

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

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

so that I have these: first button on first button_place and so on...

<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

Select all buttons and places. Then iterate over buttons and append them to corresponding places container.

jQuery version:

const $places = $('.button_place')

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

Pure JS version:

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 2

Simply use with each() of $('.button_place') .and append($('.button').eq(a).clone()).html() its used to get the outerhtml of 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> 

Answer 3

Select both sets, loop over one set, and append to the other set.

 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 4

You can do it using each function as:

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

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

use html function if you want to replace content and use append if you want to add content at the end.