Question

我有两个带子元素的div，我希望将div 2中的div移动到div 1.我可以这样做：

var divstoMove = $('.combineDivs .div2 div').detach();
$('.combineDivs .div1').append(divstoMove);
$('.combineDivs .div2').hide();

我的问题是，一旦他们像这样移动了div，我该怎么重新排序：

当前加价

<div class="combineDivs">

<div class="div1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="div2">
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

</div>

所需的标记

<div class="combineDivs>

<div class="div1">
  <div>1</div>
  <div>4</div>
  <div>2</div>
  <div>5</div>
  <div>3</div>
  <div>6</div>
</div>
</div>

每列中可以有任意数量的div

Answer 1

如果两个div中的子div数相同，这将有效。

＆＃13;

var divstoMove = $('.combineDivs .div2 div').detach();
$('.combineDivs .div1 div').each(function(i, el) {
  $(this).after(divstoMove.eq(i));
});
$('.combineDivs .div2').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="combineDivs">
  <div class="div1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="div2">
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/71712hqa/1/

这是一个更通用的解决方案，可以处理存在不同数量元素的情况。

＆＃13;

var divstoMove = $('.combineDivs .div2 div').detach();
var $div1 = $('.combineDivs .div1');
var $div1Divs = $div1.find('div');
$div1Divs.each(function(i, el) {
  $(this).after(divstoMove.eq(i));
});

if (divstoMove.length > $div1Divs.length) {
  $div1.append(divstoMove.splice($div1Divs.length, divstoMove.length - $div1Divs.length))
}

$('.combineDivs .div2').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="combineDivs">
  <div class="div1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="div2">
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/71712hqa/3/

Answer 2

如果没有看到真正的html，或者知道是否有相同的数量，你可以尝试使用元素的索引进行插入匹配

＆＃13;

    var $existDivs =  $('.combineDivs .div1').children();
    $('.combineDivs .div2').children().each(function(i){
        $(this).insertAfter($existDivs.eq(i));
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="combineDivs">

<div class="div1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="div2">
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

</div>

＆＃13;

fiddle demo

Answer 3

当列表长度不等时有效的版本 - 从两个容器中获取div列表，然后将它们合并到第一个容器中：

var set1 = $('.combineDivs .div1 div').get();
var set2 = $('.combineDivs .div2 div').get();
var ctr = $('.combineDivs .div1');

for ( var i = 0; (i < set1.length) || (i < set2.length); ++i )
  {
    if (i < set1.length)
      ctr.append(set1[i]);
    if (i < set2.length)
      ctr.append(set2[i]);
  }

$('.combineDivs .div2').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="combineDivs">

  <div class="div1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <div class="div2">
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>

</div>

合并两个div并重新排序

3 个答案: