javascript - 如何在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')
    });
});

正如您所期望的那样工作。

我的问题是，当一个元素被 jQuery 删除时，如何保留.odd元素left和.even元素？right.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;
}