使用insertAfter将一个div移动到另一个div后面的jQuery技巧，该操作在一个div中进行。

Question

自从两个小时前我一直在做以下事情，我试图在单击时将div id="msg"移动到div class="meta anchor"后面。由于它的结构方式，整个过程让我感到困扰。

我已经标记了div id="msg"应该移动到的位置。你能帮忙吗？我的失败尝试如下。

    <div class="reQ">
        <div class="post">
            <div class="entry">
                <div class="links"> 
                    <div class="icons"><i class="icon-delete delete"></i></div>
                </div>

                <div class="meta anchor">
                    Content
                </div>
                !-- div id="msg" goes here --!
            </div>
        </div>
    </div>

    <div id="msg">Div with Message</div>

jQuery

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

    var self = $(this);
    // $('#msg').insertAfter(self.parent()).show();
    // self.parent().after('.msg');

    self.parents('.reQ').$('#msg').insertAfter('.anchor').show();
});

演示

编辑 页面上的html部分多次重复。它包含帖子。我需要msg仅放在单击图标的帖子下面。

- Norman

Answer 1

试试这个

$('.delete').on('click', function() {
    var anchor = $(this).closest('.post').find('.anchor');
    $('#msg').insertAfter(anchor).show();
});

http://jsfiddle.net/dhR36/4/

此外，您正在使用jQuery 1.7，因此应将live更改为.on

这是有关insertAfter的文档：http://api.jquery.com/insertafter/

- Huangism

---

可以这样做，但是我忘了提到的是，我发布的HTML部分在页面上重复出现了几次。它保存了帖子。因此，我需要将我正在尝试移动的div放在图标被点击的帖子中.anchor下面。因此，我使用了this等。 - Norman

@Norman更新了，我不确定您是想将消息从帖子移动到另一个帖子，还是让消息保留在每个帖子下面。 - Huangism

#msg 将需要从帖子移动到帖子。因此，如果我在帖子1中单击图标，它将必须移动到那里；如果我在帖子3中单击它，它将必须移动到那里。最终（在生产中），它将包含一个表单，我将使用该表单发送管理员消息，如果帖子需要更正或进行任何更改。 - Norman

是的，有的。感谢您的帮助。 - Norman

Answer 2

Try this

Js

$(".icon-delete").click(function() {
    $("#msg").insertAfter(".meta");
})

- Pulkit Jain

Answer 3

不完美但是能用：

$( ".meta" ).click(function() {
    $( "#msg" ).insertAfter( $( ".meta" ));
    $( "#msg" ).removeAttr( "id" );
});

- Frank Tudor