相對於JS中parent.parent容器的positon元素？ 沒有絕對/固定位置？

Question

我有一個棘手的問題，我正拼命試圖找到一個可行的解決方案。

article#post和aside#sidebar左右並排浮動-非常簡單。 在我的article#post內部有一個h1和一個div.post-entry 。

我想知道是否可以確定div.post-entry與外部容器section#content的相對偏移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;