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

Question

I have 3 blocks of images with text on top of them. Here is how one of the 3 looks like.

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

I want to get the title height(); in jQuery and apply it to the aligh-v . I tried the following jQuery code but it doesn't work.

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

Answer 1

The issue is because you need to use the this reference within the each() method to refer to the current element. As it stands, your code is calling height() the entire set of elements which means only the height of the first element is returned. Your syntax of string concatenation is also a little off. Try this:

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

Also note that this can be made more succinct by removing the each() loop entirely and passing a function to the css() method which returns the value needed:

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