获取每个元素获取高度并将其应用为margin-top

Question

我有3块图像，上面有文字。以下是3个中的一个的样子。

<div class="lp">
    <h2 class="align-vert">
        This is my title
    </h2>
</div>

我希望在jQuery中获得标题height();并将其应用于aligh-v。我尝试了以下jQuery代码，但它没有用。

jQuery.each(jQuery('.js-vert'), function() {
    jQuery(this).css({
        "margin-top": '"' + jQuery('.js-vert').height() + '"'
    });
});

Answer 1

问题是因为您需要使用this方法中的each()引用来引用当前元素。就目前而言，您的代码正在调用height()整个元素集，这意味着只返回第一个元素的高度。你的字符串连接语法也有点过时了。试试这个：

$('.js-vert').each(function() {
    $(this).css("margin-top", $(this).height());
});

另请注意，通过完全删除each()循环并将函数传递给返回所需值的css()方法，可以更加简洁：

$('.js-vert').css('margin-top', function() {
    return $(this).height();
});