0

2 つの列を持つメイン リストがあります。これらの列内で、各 div には複数のクラスがあります。これらのクラスの 1 つを選択すると、列が偶数になるように並べ替えます。これが私が始めているものの例です：

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

「赤」の切り替えボタンをクリックした後、赤い点以外はすべて非表示にしますが、2 つの列の間で赤い点を均等に並べ替えます。すべてを正しく非表示にできますが、「左」と「右」の div の間に 4 つの赤い 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>

前もって感謝します。

4

3 に答える 3

0

すべての.reds を左に移動し、中間点を見つけて、グループの後半を右に戻します。

$('.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

于 2013-02-21T16:09:27.597 に答える
0

あなたが使用することができます

$(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/のデモ

于 2013-02-21T16:10:28.333 に答える
0

いくつかのオプションがあることは知っていますが、私はこれに少し取り組み、私のものも共有したいと考えました:

これは私の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/

于 2013-02-21T17:19:18.873 に答える