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(); }); });，我该如何保留？{/ p>

我试过这个，但显然不起作用：

{{1}}

任何建议真的很感激！

Answer 1

尝试使用even和odd选择器。 已更新：如果您使用position属性，则在删除其他元素时，元素不会浮动。

Here is working 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;
}

如何在jQuery删除时保持奇数/偶数元素的左或右？

2 个答案: