Question

我有两个同一个班级的div，我试图将两个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>

Answer 2

您可以迭代.pac-container然后单独移动。

在示例中，我添加了wrapper类以使用公共选择器并使用.eq()来定位元素。

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

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

Answer 3

要移动元素，请使用detach()和appendTo()试试这个：

$(".pac-container").each(function(i){
    $(this).detach().appendTo($(".wrapper").eq(i))
});

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

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

目标

3 个答案: