Question

Hello需要一些帮助才能将具有相同类的多个元素分发给具有相同类的其他多个元素。我想也许.append可以帮助解决这个问题。

我想移动这些： ...

<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

选择所有按钮和位置。然后迭代按钮并将它们附加到相应的位置容器。

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 2

只需使用'<div><div>foo</div><p>foo2</p>foo3*caret position here*' : returns '<div>' (the first div) '<div><div>foo</div><p>foo2*caret position here* : returns '<div><p>' '<div><div><div>foo*caret position here* : returns '<div><div><div>'的{{1}}。each()用于获取$('.button_place')

的外部HTML

append($('.button').eq(a).clone()).html()

button

Answer 3

选择两个集合，循环遍历一个集合，然后附加到另一个集合。

＆＃13;

var buttons = $(".button"),
  places = $(".button_place");

buttons.each(function(i, elem) {
  places.eq(i).append(elem)
})

＆＃13;

.button_place {
  border: 1px solid red;
}

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用每个功能执行此操作：

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

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

如果你想要替换内容，请使用html函数;如果你想在最后添加内容，请使用append。

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

4 个答案: