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

Question

我有两个同一个类的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

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

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>

但是,这不是很干.您可以改为在包装器元素上使用公共类,然后通过索引将它们与容器相关联,如下所示:

$('.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>