特定のclass名が付いた各要素に、自身の横幅を基準にした高さ指定したCSSをjQueryで付加する

Question

###前提・実現したいこと

下記のような前提です。
・特定のclass名（例：foo）が付いた要素が1ページ内に複数存在。
・.fooそれぞれの横幅は一定ではない。
・jQueryで、.fooそれぞれに、自身の横幅×0.56 pxの高さを指定するCSSを付加したい。

jquery初心者で、調べながら記述してみましたが、正常な動作を実現できずにおります。
是非ご教授いただければ幸いです。

###該当のソースコード

<script> $(function(){ var element = $('.foo'); var elementWidth = element.width(); thumb.load(function(){ $(this).css({ 'height' : elementWidth * 0.56 + "px" }); }); }); </script>

Answer 1

$(function() {
  $('.foo').each(function(i,e) {
    $(e).css({'height':$(e).width() * 0.56 + 'px'});
  });
});

こんな感じでいけるのではないでしょうか。

Comments

[退会済みユーザー]

ご教授ありがとうございます！
なるほど(e)が要るんですね

Answer 2

earchでそれぞれ一度取得しないと動作しません。

Comments

[退会済みユーザー]

ご教授ありがとうございます！