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

我有两列。与元素左列在jQuery中将元素从一列移动到另外两列？

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提琴：https://jsfiddle.net/pczbe0qv/

来源

2015-11-03 SanJeet Singh

你应该显示你的html，如果我们不得不想象那些正在使用的html，那么人们不太可能提供帮助:)如果你可以让jsFiddle更好 – DelightedD0D

等等，你基本上是用一些表来布局你的页面，你想重新排列不同大小屏幕的布局？....如果是的话......如果你重视你的理智，现在停下来。表格不是这个。使用[bootstrap]（http://getbootstrap.com/）方法代替 – DelightedD0D

@ DelightedD0D好吧我将创建一个JS小提琴。请稍候：D –

在我看来，你最好通过更改布局，以充分利用“重新排序列”内置引导服务。

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

否则，要得到你想要的功能，有打算涉及一些复杂的计算，这些计算很容易被打破。

来源

2015-11-03 04:42:13 DelightedD0D

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

回答

相关问题