javascript - 将每个具有相同类的 div 移动到另一个 div 中

Question

我有 2 个具有相同类的 div，并且我正在尝试将这 2 个 div 中的每一个移动到不同的 div 中。

setTimeout(function() {
  $(".pac-container").prependTo("#gp-content");
}, 500);

.pac-container {
  width: 50px;
  height: 100px;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

#wrapper1,
#wrapper2 {
  width: 25px;
  height: 75px;
  border: 1px dotted red;
  padding: 5px;
  margin: 5px;
}

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

<div id="wrapper1"></div>
<div id="wrapper2"></div>

我现在的目标是将第一个 pac-container 移动到 #wrapper1 中，将第二个 pac-container 移动到 #wrapper2 中。 pac-container 在 html 标记处彼此相邻，每个 #wrapper 位于 html 标记处的不同位置。

<小时/>

目标

<div id="wrapper1">
<div class="pac-container"></div>
</div>
<div id="wrapper2">
<div class="pac-container"></div>
</div>

Answer 1

您可以通过使用 eq() 通过索引显式引用 .pac-container 元素来实现此目的:

var $pac = $('.pac-container');
$pac.eq(0).prependTo('#wrapper1');
$pac.eq(1).prependTo('#wrapper2');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">PAC container 1</div>
<div class="pac-container">PAC container 2</div>

<div id="wrapper1">wrapper1 </div>
<div id="wrapper2">wrapper2</div>

但是，这并不是很干燥。您可以在包装元素上使用公共(public)类，然后通过索引将它们与容器相关联，如下所示:

$('.pac-container').each(function(i) {
  $(this).prependTo($('.wrapper').eq(i));
})  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">PAC container 1</div>
<div class="pac-container">PAC container 2</div>

<div class="wrapper">wrapper1 </div>
<div class="wrapper">wrapper2</div>