0

I can't seem to find the answer on the internet, and the jQuery offset() doesn't seem to be working as intended. Here's the situation:

我想要做的是垂直对齐到两个 div。一个是位置不确定的内联块（y 坐标取决于有多少正在进行的内容。）另一个 div 有补充信息，我希望它位于另一个 div 的旁边，位于边缘区域的边缘地点。

根据我对 jQuery.offset() 工作原理的理解，它应该能够获取内容 div 相对于文档的坐标，然后可以用来分配边缘 div 的绝对位置。但是，当我在内容 div 上调用 offset() 时，我得到的位置是 (0px,0px)，这显然是不准确的。

我会以错误的方式解决这个问题吗？

这是我的代码：

// Find the div we want to position to (works)
var related_node = $('#content-note-n').attr('data-nid');
var node_obj = $('#node-' + related_node);
// Get the offset position of that div (does not work- returns 0,0)
var position = node_obj.offset();
alert("Top: " + position.top);
$('#content-note-n').css('top', position.top);

这是相关的 HTML（我使用的是 CMS，因此大大简化了）：

<section id="zone-content">
  <aside id="region-side">
     <div id="content-note-n" data-nid="n">
       <h3>Note N</h3>
     </div>
  </aside>
  <div id="region-content">
    <div id="node-n">
      <div class="node-content">
         <p>Content for Node N</p>
      </div>
    </div>
  </div>
</section>

如果这也有帮助，可以发布 CSS，但没有一个元素是 display=none，jQuery 说这会破坏 offset()。

更新：

已尝试将我的确切代码复制到 jsFiddle（不包括 css）中，并且它在那里按预期工作。现在将尝试通过 css 复制。

更新：

将所有 CSS 也复制到 jsFiddle 中，它仍然可以工作。我很混乱。

4

2 回答 2

0

我尝试了一个测试用例......这对我来说很好：-

<script type="text/javascript">
$(document).ready( initialise );

function initialise() {
var myObject = $("#my_div");
var myposition = myObject.offset();
$("#positioned").css({ 'top' : myposition.top , 'left' : myposition.left });

}
</script>

用这个 html

<body>
<div id="positioned" style="position:absolute;">overlap</div>
<div>Hello</div>
<div style="margin: 50px"><div id="my_div" type="text" name="name">original</div></div>
</body>
于 2013-09-10T14:57:07.793 回答
0

内容节点被 CMS 打印了两次。一个在内容部分，另一个在隐藏部分（位于元素层次结构中可见部分的上方）。jQuery 只返回隐藏部分的节点，因此是 0 位置。当我向选择器添加一个类时，jQuery 开始返回两个元素，这就是我发现这个问题的原因。我的猜测是，因为我发送的选择器字符串只有一个 ID 标识符，所以 jQuery 智能地只发送回一个元素。

因此，要回答最初的问题，最佳实践当然是更改 CMS 打印节点隐藏副本 ID 的方式。快速解决方案是将“#section-content”添加到选择器以使其成为“#section-content #node-n”。

于 2013-09-10T17:09:05.207 回答