删除 Div 并出现在另一个地方[重复]

Question

我希望出现 4 个divs。当我单击任何divs 时，我希望div 移动到最后。

因此，例如，如果第一个 div 被点击，它应该成为最后一个 div。

HTML：

<a href='#'><div id="pop0" class="pop"></div></a>
<a href='#'><div id="pop1" class="pop"></div></a>
<a href='#'><div id="pop2" class="pop"></div></a>
<a href='#'><div id="pop3" class="pop"></div></a>

CSS：

#pop0 {
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
}
#pop1 {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}
#pop2 {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
}
#pop3 {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
}

jQuery：

var id = "pop0";
$(".pop").bind('click', function(){
    var oldId = $(this).attr('id');
    $(this).attr('id', id);
    id = oldId;
})

Demo

Answer 1

使用你的代码很糟糕，因为你没有任何 DOM 包装器元素......（除了正文）

$(".pop").bind('click', function(){
    $('body').append($(this).parent());
})

DEMO

Answer 2

试试这个代码

JS

$(".pop").on('click', function() {
    // Get the closest anchor container
    var $a =$(this).closest('a');
    // Insert after the last anchor container
    $a.insertAfter('a:last')
})

另外，bind 已被 on 取代。使用它来绑定事件处理程序。

通过不重复相同的样式，您的 html 也可以稍微清理一下。将常用样式移到同一个类中。

CSS

.pop{
    width: 100px;
    height: 100px;
    position: relative;
}

#pop0 {
    background: yellow;
}
#pop1 {
    background: red;
}
#pop2 {
    background: blue;
}
#pop3 {
    background: green;
}

Check Fiddle

Answer 3

也许只是分离项目并将其附加到容器的末尾？

$(document).on('click','.pop',null,function(){
    var $pop = $(this);
    var $parent = $pop.parent();
    $pop.detach();
    $parent.append($pop);
});

http://jsfiddle.net/rtpt5/3/