jQuery - 即使在动态生成的元素之后，也使元素在 DOM 中最后（在关闭主体之前）答案

【问题标题】：jQuery - make an element last in the DOM (before close of body) even after dynamically generated elementsjQuery - 即使在动态生成的元素之后，也使元素在 DOM 中最后（在关闭主体之前）
【发布时间】：2012-07-25 23:16:04
【问题描述】：

tl;dr: 如何让点击处理程序可见的 DOM 元素成为关闭 body 之前的最后一个元素，即使正在附加动态生成的元素?

本质上，我希望打开元素的单击也将其在 DOM 中移动到最后一个，即使在附加了一些动态元素之后也是如此。

我的问题源于一个模态在另一个模态中打开，而一个页面上有多个模态。一个问题是，在页面加载时，子模式存在于 DOM 中，而主模式在点击时被实例化（子模式使用不同的代码来生成，而主模式使用 jQuery UI 对话框）。

如果你打开一个模态然后打开子模态一切都很好。如果您打开第二个模态，然后在重新打开第一个模态时将其关闭，则子模态将不会出现，因为它隐藏在第二个模态下方。如果我将这些子模态附加到正文，从而将它们放在任何生成的模态之后，它们看起来很好（但这会产生其他问题）。尽管看起来这似乎不是 z-index 问题（我已经尝试了与此相关的所有事情，但没有运气），它似乎与这些模态在 DOM 中的位置有关。

代码可能更清晰：

这是页面加载时 html 的样子：

<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>

点击打开第一个主模态窗口后：

<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>

点击打开该模态的子模态后，我必须将子模态移动到主模态下方，否则它不会出现（同样，z-index 不会影响此阻塞）：

$('#submodal_1').insertAfter('#primary_modal_1');

此时，如果您关闭 #primary_modal_1，它将被隐藏，但仍存在于 DOM 中。如果您再打开一秒钟，代码现在将如下所示：

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>

此时如果您重新打开第一个主模态并尝试打开其子模态，则子模态将不会出现。但是，如果您将子模态移动到最后一个主模态下方，如下所示：

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>

子模态将正确显示。我想确保子模态总是在 DOM 中最后，无论附加了多少主模态。

【问题讨论】：

标签： javascript jquery dom modal-dialog

【解决方案1】：

JQuery的append方法“将参数指定的内容插入到匹配元素集合中每个元素的末尾。”

$('body').append(...);

每次动态添加内容时，您都必须移动元素。

检查这个 JSFiddle： http://jsfiddle.net/eZ2Dq/

【讨论】：

这适用于已经在 DOM 中的元素，但不适用于动态添加的元素。动态添加的模态框将在创建时位于 DOM 中的最后一个。
完成，您可以检查 JSfiddle 的 POC :)
这看起来像是答案。我说“看起来像”，因为它确实有效并且您的答案是正确的，但我发现其他问题正在干扰......叹息。不过，感谢您的帮助！

【解决方案2】：

看看 jQuery appendTo 方法。

【讨论】：

【解决方案3】：

你总是可以clone元素，append克隆到<body>标签的末尾，然后remove原始元素。

Rob W 指出克隆是不必要的，因为在现有元素上调用 append 会自动将其从先前位置删除。考虑到这一点，您可以扩展您的代码以打开一个新的模式窗口来执行以下操作：

$('.submodal').appendTo('body');

应该（假设我已经正确理解了 API）将所有子模式元素（由 submodal 类标识）改组到 <body> 标记的末尾。

【讨论】：

不需要克隆。添加元素时，它会从之前的位置移除。
@RobW 很高兴知道，谢谢。我不能说我曾经需要附加一个以前已经存在的元素，所以这不是我真正研究过的东西。