存储 DIV 元素的原始父级答案

【问题标题】：Store the original parent of a DIV element存储 DIV 元素的原始父级
【发布时间】：2013-05-07 14:18:38
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

Blaze 的意思：$('.yourDiv').hide().clone().appendTo('#container').show().addClass('clone'); 将抓取 .yourDiv，隐藏它，克隆它，追加，显示克隆并为克隆添加一个类（这样你就可以稍后再做 $('.yourDiv.clone')。跨度>
@RaphaelDDL 此元素在移动后会受到修改。它包含一个文本区域，因此我需要再次克隆它，删除原始区域，然后添加此区域以恢复原始状态。再次移动它不是更简单吗？
当您需要回到第一个位置时，您可以使用$('.yourDiv').replaceWith('.yourDiv.clone').show();。（显示是因为我们克隆时 yourDiv 被隐藏了）。

标签： jquery jquery-data

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这个使用.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'));
}

【讨论】：

【解决方案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');

【讨论】：

克隆而不是移动它有什么好处？
您根本不必存储父元素，因为原始元素正是您离开它的位置。
@Steve 如果有时您需要隐藏克隆并“移回”到原来的位置（也就是“为了将 div 元素移回原来的位置”，您可以隐藏原来的那个你说）。
@Blazemonger 此元素在移动后会受到修改。它包含一个文本区域，因此我需要再次克隆它，删除原始区域，然后添加此区域以恢复原始状态。再次移动它不是更简单吗？
如果您要修改克隆，请改用$e.replaceWith($c);。您仍然可以从将原件隐藏在原来的位置中受益。