javascript - 在 jQuery 中一次将元素从一列移动到另外两列？

Question

我有两列。带元素的左列

1L, 2L, 3L, 4L, 5L, 6L....

带元素的右列

1R, 2R, 3R, 4R..... 

我想做的是，如果宽度小于 991px，一次从右列中取出两个元素，然后使用 jQuery 将它们放在左列中。最后的顺序应该是 1L, 2L, 1R, 2R, 3L, 4L, 3R, 4R ..... 如果宽度大于 991px，我想重新排列原始配置中的元素。

我事先不知道每列中的元素数量。任何列都可能有更多元素。我想继续移动元素，直到右列中的元素为零或左列全部填满为止。之后我想将剩余的元素附加到左列。像这样:1L, 2L, 1R, 2R ...7L, 8L, 7R, 8R, 9R, 10R, 11R, 12R...

到此为止。我有以下代码:

 $('#right-col').children().slice(0,2).detach().insertAfter("#left-col .item:first");

它仅从右列向左插入前两个元素，其余元素保持不变。我试图创建一个这样的循环:

 while($('#right-col').children().length>0) {
   $('#right-col').children().slice(0,2).detach().insertAfter("#left-col .item:first");
 }

然而，这会将所有元素放在第一个元素之后(这是预期的)。我怎样才能按照我提到的方式一次将两个元素放在一起？

这是我的HTML

<section class="col-md-8" id="left-col">
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  .
  .
  .
  <div class="item"> Blah blah blah </div>
</section>
<section class="col-md-4" id="right-col">
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  .
  .
  .
  <div class="item"> Blah blah blah </div>
</section>

这是一个 JS fiddle :https://jsfiddle.net/pczbe0qv/

Answer 1

在我看来，您最好通过更改布局来利用 Bootstrap 中内置的“列重新排序”。

看看Column Ordering和 Column Ordering in Bootstrap

像这样的例子(jsFiddle):

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="item col-xs-2 ">L1</div>
    <div class="item col-xs-2 ">L2</div>
    <div class="item col-xs-2 col-md-push-4">R1</div>
    <div class="item col-xs-2 col-md-push-4">R2</div>
    <div class="item col-xs-2 col-md-pull-4">L3</div>
    <div class="item col-xs-2 col-md-pull-4">L4</div>
</div>
<div class="row">
    <div class="item col-xs-2 ">L1</div>
    <div class="item col-xs-2 ">L2</div>
    <div class="item col-xs-2 col-md-push-4">R1</div>
    <div class="item col-xs-2 col-md-push-4">R2</div>
    <div class="item col-xs-2 col-md-pull-4">L3</div>
    <div class="item col-xs-2 col-md-pull-4">L4</div>
</div>

否则，要获得您想要的功能，将涉及一些非常容易破解的复杂计算。