JS中相对于parent.parent容器的位置元素？没有绝对/固定定位？

Question

我有一个棘手的问题，我正在拼命寻找可行的解决方案。

article#post 和 aside#sidebar 并排浮动 - 相当简单。 在我的article#post 里面是一个h1 和一个div.post-entry。

我想知道我是否可以以某种方式确定div.post-entry 与外部容器section#content 的相对偏移量。我想这样做的原因是我可以将带有margin-top 的浮动侧边栏定位在与“div.post-entry”相同的高度上。

这是我当前 html 结构的模型：

<section id="content">

    <article id="post">
        <h1>Title of the post</h1>
        <div class="post-entry">
            <p>Something</p>
        </div>
    </article>

    <aside id="sidebar>
        Something
    </aside>

</section>

所以，我想再一次找到任何解决方案来获得像素值，即div.post-entry 位于section#content 内部的距离。

我遇到的主要问题是我什至无法post-entry.offsetTop 工作。这应该得到div.post-entry 相对于article.post 的偏移量，因为这是它的父级。这实际上也应该对我有用。

var articleOffset = $('.post-entry').offsetTop;
console.log($('.post-entry')); //found and exists
console.log(articleOffset); undefined

任何想法为什么这对我也不起作用？为什么我在这里的 offsetTop 值未定义。有一个很大的<h1>，其填充至少为“30px”，可以抵消div.post-entry。

关于这件事有什么想法吗？ 也许还有其他关于如何做到这一点的酷解决方案？我只想让aside#sidebar 从与div.post-entry 相同的高度开始，但我不想更改标记。

Answer 1

您需要从 jQuery 对象中选择 DOM 元素。

var articleOffset = $('.post-content')[0].offsetTop;