0 
<div class="row categories">
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a> <!-- user clicks this one -->
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
</div>
<div class="row categories">
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
</div>

これは、jQuery で操作しようとしている html の単純化されたサンプルです。ユーザーが削除をクリックすると、カテゴリが削除され、行が上から下に塗りつぶされるようにカテゴリ div を再配置したいと考えています。

例を挙げます: ユーザーが上記の HTML のコメントでラベル付けされた削除をクリックした場合、カテゴリ div を再シャッフルして、一番上の行に 3 つのカテゴリ div があり、2 番目の行には 2 つのみがあるようにする必要があります。任意の数の行で機能します。

私はいくつかのことを試しましたが、どこにも行きません.DOM操作の重要な原則が欠けているように感じます.

すべてのカテゴリ div を 1 つのオブジェクトとして収集し、それらを関連する行タグでラップしようとしましたが、「#DivElement には XXX プロパティ エラーがありません」というメッセージが多数表示されます。html をゼロから再構築しようとしましたが、イベント ハンドラーの .bind の問題がたくさん発生します (前述のとおり、これは簡略化されたサンプルです)。後者は私が得た最も近いものですが、見苦しく、過度に複雑に感じます.

カテゴリの div を集めて、それらを再ラップするのが良いと思いますが、本当にわかりません...

助けていただければ幸いです

4

3 に答える 3

1

ラッパー要素があると仮定して（id="container"私の例では）試してください

var container = $('#container');
container.on('click','.delete', function(e){
    e.preventDefault(); // cancel the click
    $(this).closest('.category').remove(); // remove clicked category

    var elements = container.find('.category').detach(); // get all .category elements
    container.empty().append(elements); // clear container and re-append only the category elements
    for(var i = 0; i < elements.length; i+=3) {
      elements.slice(i, i+3).wrapAll("<div class='row categories'></div>"); // wrap them every 3 categories..
    }
});

http://jsfiddle.net/f47bJ/2/のデモ

于 2012-09-25T19:43:29.783 に答える
1

このコードを試してください。jsfiddle

$(".delete").click(function(){
var next = $(this).parents(".categories").next();
    if(next ){
      var copyfrmnext = next .find(".category:first");
    $(this).parent().parent().append( copyfrmnext );
   }
    $(this).parent().remove();

});
于 2012-09-25T19:34:46.513 に答える
0

jsFiddle デモ

$('.delete').on('click', function () {

    var _myRow = $(this).closest('.row');
    var _nextCategory = _myRow.next('.row').find('.category').first();

    $(this).closest('.category').remove();

    _myRow.append(_nextCategory );
});​
于 2012-09-25T19:34:23.517 に答える