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，以便顶行有三个类别 div，第二行只有两个 - 这需要适用于任意数量的行。

我尝试了一些事情，但没有取得任何进展——我觉得我错过了一些 DOM 操作的基本原则。

我尝试将所有类别 div 收集为一个对象，然后将它们包装在相关的行标签中，但我得到很多“#DivElement 没有 XXX 属性错误”。我曾尝试从头开始重建 html，但后来我遇到了很多令人讨厌的事件处理程序 .bind 问题（正如我所说，这是一个简化的示例）。后者是我得到的最接近的，但感觉丑陋且过于复杂。

我觉得收集类别 div 然后重新包装它们是要走的路，但我真的不知道......

帮助将不胜感激

4

3 回答 3

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 回答
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 回答
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 回答