Question

我有两列。带有元素的左列

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

带有元素的右栏

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

我想要做的是，如果宽度小于991px，则从右列一次取两个元素，并使用jQuery将它们放在左列中。最后的订单应该是 1L, 2L, 1R, 2R, 3L, 4L, 3R, 4R ..... 如果width大于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小提琴：https://jsfiddle.net/pczbe0qv/

Answer 1

在我看来，通过改变你的布局以及＃34;列重新排序＆＃34;来最好地服务你。内置于Bootstrap。

查看Column Ordering和Column Ordering in Bootstrap

这样的例子（jsFiddle）：

＆＃13;

<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>

＆＃13;

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

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

1 个答案: