jquery - 存储 DIV 元素的原始父级

Question

我正在使用该函数移动div元素的位置（和父级）。insertAfter像这样的东西：

$('.annotation i').click(function(){
    $('.annotation').find('.comment').insertAfter('#container');
});

我想知道是否有可能以某种方式存储原始父项，以便div在另一个用户操作后将元素移回其原始位置（在原始父项下）。

谢谢。

Answer 1

这个使用该.data()函数存储对原始父级的引用。

$('.annotation i').click(function(){
    $('.annotation').find('.comment').each(function() {
        $(this).data('oparent', $(this).parent());
        $(this).insertAfter('#container');
    });
});

function anotherUserAction(comment) {
    comment.appendTo(comment.data('oparent'));
}

Answer 2

var parent = $('.annotation').find('.comment').parent();

将为您提供 .comment 类元素的父级。

您还提到存储它的位置。您可能会发现JQuery 索引很有帮助。存储父索引或以类似方式存储特定 .comment 元素的位置以供以后使用。

Answer 3

您可以创建元素的克隆并隐藏原始元素：

$e = $('element');
$c = $e.clone();
$e.hide();

然后您可以销毁移动的元素并再次显示原始元素：

$e.show();
$c.remove();

或用移动的替换原件：

$e.replaceWith($c);

http://api.jquery.com/clone

如果原始元素具有 ID 属性，您还需要在克隆上更改或删除它，以便所有元素都保留唯一 ID：

$c.attr('id','new-unique-string');
// or
$c.removeAttr('id');