jQuery刪除后如何保持奇數/偶數元素的左或右？

Question

我有以下代碼：

CSS：

.wrapper{width:400px}
.wrapper div{width:200px}

.odd {float:left}
.even {float:right}

HTML：

<div class="wrapper">
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
</div>

jQuery的：

$('.wrapper').each(function() {
    var $children = $(this).children(),
    $item;
    $children.each(function(i) {
       $item = $(this).addClass(i % 2 === 0 ? 'odd' : 'even')
    });
});

如您所願。

我的問題是，我怎么能保持.odd元素left和.even要素right當一個人的jQuery去除.remove()

我已經嘗試過了，但是顯然不起作用：

$('.wrapper div').click(function(){
  $(this).fadeOut(function(){
    $(this).siblings().removeClass('odd');
    $(this).siblings().removeClass('even');

        $('.wrapper').each(function() {
            var $children = $(this).children(),
            $item;
            $children.each(function(i) {
                $item = $(this)
                .addClass(i % 2 === 0 ? 'odd' : 'even')
            });
        });

    $(this).remove();
  });
});

任何建議都非常感謝！

Answer 1

嘗試使用偶數和奇數選擇器。 已更新：如果您使用position屬性，則當其他元素被刪除時，這些元素將不會浮動。

這是工作的jsFiddle。

jQuery的：

var boxHeight = $(".wrapper div").height();
$(".wrapper div:even").addClass("even");
$(".wrapper div:odd").addClass("odd");
//this initualise once after page load, so values won't change/update on click

$(".wrapper div").each(function(i){
    if ( i === 2 || i === 3 ) { $(this).css('top', boxHeight +'px'); }
    if ( i === 4 || i === 5 ) { $(this).css('top', 2*boxHeight +'px'); }
});

$(".wrapper div").click(function(){ $(this).remove(); });

CSS：

.wrapper{position:relative;left:0;top:0;}
    .wrapper div{position:absolute;top:0;}
        .wrapper .even{ left:0; }
        .wrapper .odd{ right:0; }

Answer 2

您可以避免使用Javascript並使用CSS nth-child

div.wrapper:nth-child(odd) {
    color: red;
    float:right;
}
div.wrapper:nth-child(even) {
    color:blue;
    float:left;
}