替换 html 内容后的 offset() 值答案

【问题标题】：offset() values after replacing html content替换 html 内容后的 offset() 值
【发布时间】：2010-12-23 10:03:14
【问题描述】：

我有一个 div 作为包装器，它包含网站的几乎整个 DOM（从 body 到 /body）。如果我在文档准备好时得到其中一个元素的offset()，一切都很好，但在替换 $('#wrapper').html(newContent) 之后，偏移量为 0。

有什么提示吗？

【问题讨论】：

标签： javascript jquery html offset

【解决方案1】：

如果#wrapper 是您的内容包装器，那么您实际上是在用新的 DOM 子树替换整个内容。这意味着 #wrapper 中的任何元素现在不再是 DOM 的一部分。以下代码说明了您的问题：

$.ready(function() {
  var elem = $('#somediv'),
      wrapper = $('#wrapper'),
      newContent = '<div>...</div>';

  alert(elem.offset().top); // displays the correct offset

  wrapper.html(newContent); // swaps out the contents of #wrapper, destroys #somediv

  alert(elem.offset().top); // displays 0, because `elem` is not inside #wrapper anymore
});

可以在这里看到一个工作示例：snippet@jsfiddle

【讨论】：

感谢克罗夫的帮助。有没有办法恢复 DOM 控制？
对不起，我再次阅读您的回答，发现有一些误解。替换后，我要求之前存在并再次存在的元素的 offset()。这种替换实际上只是在不同的地方添加了更多的东西，但它也保留了旧的元素。
我明白你在说什么——但是当你在一个元素上使用.html(...) 时，该元素的所有内容都会被重新创建。即使类和 ID 相同，旧元素也不再存在。如果您想查看新元素的偏移量是多少，请使用$(...) 重新选择要再次检查的元素，它将报告正确的偏移量。
你好，Krof，我再次重新选择元素，但它不再返回它的偏移量......示例：替换前：$('#menu_1').offset()。顶部 = 40；更换后：
对不起，冗余，但我花了超过 5 分钟：你好 Krof，我再次重新选择元素，但它不再返回它的偏移量......一个例子：BEFORE REPLACEMENT : $('#menu_1').offset().top = 40;更换后： $('#menu_1').offset().top = 0;即使元素仍然存在并且位于相同的位置，也会发生这种情况，相反，如果我在萤火虫控制台中写入 $('#menu_1').offset().top 我会得到正确的数据......