使用 jquery 如何公开 DOM 树上较低的单个 DOM 元素？答案

【问题标题】：with jquery how can i expose a single DOM element that is lower on the DOM tree?使用 jquery 如何公开 DOM 树上较低的单个 DOM 元素？
【发布时间】：2015-01-14 06:45:24
【问题描述】：

就像 jQuery.expose() 一样 http://jquerytools.github.io/documentation/toolbox/expose.html

上面的问题是，如果元素是 DOM 树上较低的子元素，则它不起作用。即，如果元素 Y 位于顶层，并且元素 X 是 Y 的子元素，则调用 X.expose() 会创建一个覆盖 div，它在 Y 上的 z-indexed。X 的 z-index 设置为 9998 但它是一个子元素Y 所以它位于覆盖 div 的下方。

非常欢迎替代解决方案。我曾考虑先执行 .clone() 然后 appendTo('body')，然后使用 offset() 来定位克隆，但由于继承的 css 属性，.clone() 并不总是产生精确的副本。

【问题讨论】：

你能发布一些代码或JSFiddle吗？这样会更容易提供帮助。您是否也正在使用 jQuery.expose？
抱歉，我在 jsfiddle 上用 jquery.expose() 尝试了一个非常简单的示例，但覆盖层真的搞砸了。

标签： jquery css

【解决方案1】：

不要在叠加层中附加目标 DOM 元素，你不会得到你想要的效果。

您可以做的是将目标 DOM 元素和叠加层附加到同一个容器（例如正文）...

$('#my-target').appendTo($('body'));

...那么您也可以对叠加层执行相同的操作...

$('#my-overlay').appendTo($('body'));

...那么您可以调整两个元素的 z-index...

$('#my-target').css('z-index', 9999);
$('#my-overlay').css('z-index', 9998);

...或者，您可以使用...完成上述所有操作

$('#my-target').appendTo($('body')).css('z-index', 9999);
$('#my-overlay').appendTo($('body')).css('z-index', 9998);

【讨论】：

我已经编辑了我的回复，我实际上是 appendTo 正文，而不是覆盖，这是一个错误。这种方法的问题是 .clone() 不能保证创建目标元素的完美克隆。根据我的经验，大小不同，我认为是由于继承的 CSS 属性。
好吧，那么不要克隆/附加您的目标元素，只需将叠加层附加到另一个容器，将其保留在原处（只要它不在叠加层内）然后只需更改其 z -索引

【解决方案2】：

答案非常简单——我所要做的就是 clone() 一个元素到源元素的层次结构中，这样 css 属性也被继承并且克隆的大小/样式相同。

然后将克隆的元素设置为 position: absolute 并将 z-index 设置为覆盖 div 上方的一个。

设置绝对位置使该元素的 z-index 全局化，独立于 DOM 层次结构。

【讨论】：