Question

我有一系列文章，每页重复10次。结构是这样的：

<article class="postWrap">
     <h2>Title</h2>
     <p>Here is text</p>
</article>

我需要找到p标签到文章顶部的距离。因此，根据标题的长度，p标签距文章顶部的距离可能会有所不同。最好的方法很可能是使用offset()，但我无法正常使用它。

由于

更新：

这是我写的工作代码，但我想有更好的方法来实现它：

$(".postWrap").each(function(){
        var postWrap = $(this).offset().top;
        var firstP = $(this).find("p:first-of-type").offset().top;
        var diff = firstP - postWrap;
        var meta = $(this).find(".meta").css({'marginTop' : diff})

});

Answer 1

假设您的问题在第一个<h2>之前始终只有一个<p>元素，您可以使用outerHeight元素的高度（<h2>）而不是计算偏移量作为捷径：

$(".postWrap").each(function(){
    var diff = $(this).find('h2:first').outerHeight();
    var meta = $(this).find(".meta").css('margin-top', diff);
});

从你的例子中我得不到.meta是什么，但是你可以试试并告诉我它是否按预期工作。如果更合适，您也可以使用innerHeight。

编辑：或者在没有声明变量的情况下作为“单行”：

$(".postWrap").each(function(){
    $(this).find(".meta").css(
        'margin-top', 
        $(this).find('h2:first').outerHeight()
    );
});

使用jQuery查找一个元素相对于另一个元素的距离

1 个答案: