2

私はこのコードを持っています:

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();
  });
});

どんな提案も本当に感謝しています！

4

2 に答える 2

3

偶数セレクターと奇数セレクターを使用してみてください。更新:プロパティを使用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; }
于 2013-02-05T00:15:45.250 に答える
2

JavaScript を避け、CSS nth-child を使用できます

div.wrapper:nth-child(odd) {
    color: red;
    float:right;
}
div.wrapper:nth-child(even) {
    color:blue;
    float:left;
}
于 2013-02-05T00:19:55.690 に答える