jQuery對兩列內的div進行排序

Question

我有一個包含兩列的主列表。在這些列中，每個div都有多個類，當您選擇其中一個類時，我想要排列這些列以使它們均勻。這裏是我開始用的一個例子：

<div class="left"> 
    <div class="dot blue">blue one</div> 
    <div class="dot red">red one</div> 
    <div class="dot orange">orange one</div> 
    <div class="dot red">red two</div> 
    <div class="dot red">red three</div> 
</div> 
<div class="right"> 
    <div class="dot red">red four</div> 
    <div class="dot blue">blue two</div> 
    <div class="dot blue">blue three</div> 
    <div class="dot blue">blue four</div> 
    <div class="dot orange">orange two</div> 
</div> 

點擊撥動按鈕，我對「紅」之後，我想隱藏一切，除了紅點，但兩者之間的紅色的均勻排序列。我可以正確隱藏所有內容，但不知道如何在「左」和「右」div之間製作四個紅色div。這裏是我想要的輸出：

<div class="left"> 
    <div class="dot red">red one</div> 
    <div class="dot red">red two</div> 
</div> 
<div class="right"> 
    <div class="dot red">red three</div> 
    <div class="dot red">red four</div> 
</div> 

在此先感謝。

Answer 1

將所有.red s到左側，然後找到中間點和組下半年移回右：

$('.left,.right').find('.dot:not(.red)').hide(); /* or .remove() */ 
var $red = $('.left,.right').find('.dot.red').appendTo('.left'); 
var len = Math.round($red.length/2); 
$('.left .dot.red:gt('+(len-1)+')').appendTo('.right'); /* :gt is zero-based */ 

http://jsfiddle.net/mblase75/nnhBp/

http://api.jquery.com/gt-selector

Answer 2

你可以使用

$(function(){ 
    var dots = $('.dot'), 
     left = $('.left'), 
     right = $('.right'); 

    $('button').on('click', function(){ 
     var filter = $(this).data('filter'); // here you define which class to remain (on demo i have added a data-filter attribute on the buttons) 
     var filtered = dots.detach().filter('.' + filter), 
      half = Math.ceil(filtered.length/2); 

     filtered.each(function(index){ 
      var target = left; 
      if (index >= half){ 
       target = right; 
      } 
      $(this).appendTo(target); 
     }); 

    }); 
}); 

演示在http://jsfiddle.net/hnaUK/1/

Answer 3

我知道你有一些選擇，但我從事這個了一下，想我會分享我太：

這是我的jQuery：

$(document).ready(function() { 
     $("button").click(function() { 
      var classVal = "." + $(this).val(); 

      $(".dot").hide(); 
      $(classVal).show(); 

      var halfOf = ($(classVal).length/2)-1; 

      $(classVal).appendTo(".left"); 
      $(classVal+":gt('"+halfOf+"')").appendTo(".right"); 
     });     
    }); 

這裏是HTML，都是一樣的，但我不得不添加你談到的按鈕：

<div class="left"> 
    <div class="dot blue">blue one</div> 
    <div class="dot red">red one</div> 
    <div class="dot orange">orange one</div> 
    <div class="dot red">red two</div> 
    <div class="dot red">red three</div> 
</div> 
<div class="right"> 
    <div class="dot red">red four</div> 
    <div class="dot blue">blue two</div> 
    <div class="dot blue">blue three</div> 
    <div class="dot blue">blue four</div> 
    <div class="dot orange">orange two</div> 
</div> 
<div id="controls"> 
    <button value="red" type="button">Red</button> 
    <button value="blue" type="button">Blue</button> 
    <button value="orange" type="button">Orange</button> 
</div> 

然後一些簡單的CSS：

.left { 
    float: left; 
    border: 1px solid #000000; 
} 
.right { 
    float: left; 
    border: 1px solid #000000; 
} 
#controls { 
    clear: both; 
} 

隨着小提琴：

http://jsfiddle.net/CTCPZ/