在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中將元素從一列移動到另外兩列？

回答

相關問題