各要素の高さを取得し、余白として適用します

Question

私はそれらの上にテキストを持つ画像の3つのブロックを持っています。ここに、3つのうちの1つのように見えます。

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

私はjQueryのでタイトルheight();を取得し、aligh-vにそれを適用したいです。次のjQueryコードを試しましたが、動作しません。あなたが現在の要素を参照するためにeach()メソッド内this参照を使用する必要があるため

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

Answer 1

問題があります。現状のコードでは、height()という要素全体が返されます。つまり、最初の要素の高さだけが返されます。文字列連結の構文も少しです。これを試してみてください：

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

はまた、これは完全にeach()ループを削除し、必要な値を返しますcss()方法に関数を渡すことで、より簡潔で行うことができることに注意してください。

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