Question

我希望4 div出现。当我点击div中的任何一个时，我希望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

试试此代码

<强> 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 2

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

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

DEMO

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/

删除Div并将其显示在另一个地方

3 个答案:

的 Check Fiddle