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

Question

I have two columns. Left column with elements

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

Right column with elements

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

What I want to do is, if width is less than 991px, take two elements at a time from right column and put them in left column using jQuery. The final order should be 1L, 2L, 1R, 2R, 3L, 4L, 3R, 4R ..... If width is greater than 991px I want to rearrange the elements in original configuration.

I don't know the number of elements in each column beforehand. Any of the columns might have more elements. I want to keep moving elements until the elements in right column are zero or left column is all filled up to end. After that I want to append remaining elements to left column. Like this : 1L, 2L, 1R, 2R ...7L, 8L, 7R, 8R, 9R, 10R, 11R, 12R...

up to this point. I have following code:

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

It inserts only the first two elements from right column to left and leaves rest untouched. I tried to create a loop like this:

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

This however puts all the elements after the first one (which is expected). How can I put the elements two at a time together in the way I mentioned?

This is my 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>

Here is a JS fiddle : https://jsfiddle.net/pczbe0qv/

Answer 1

In my opinion, you'd be best served by changing your layout to leverage "Column Reordering" built into Bootstrap.

Take a look at Column Ordering and Column Ordering in Bootstrap

Something like this as an example ( 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> 

Otherwise, to get the functionality you want, there are going to be some complex calculations involved that are going to be really easy to break.