0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【jqueryで簡単】商品一覧で、商品画像や商品名の高さを揃える

Last updated at Posted at 2020-07-16

商品一つずつを囲ってるから、高さ指定しただけじゃ商品によって高さとりすぎたり商品名はみ出したりする。
ので、jqueryで動的に値をとってcss付加します。

let itemimg_array = [];
$('.itemimg').each(function() {
  itemimg_array.push($(this).outerHeight());
});
let itemimgMaxH = Math.max.apply(null, itemimg_array);
$('.itemimg').css('height', itemimgMaxH);
  1. 空の配列を作る。
  2. each関数で商品画像のheightをすべてとって配列に格納する
  3. Math.max.applyで、配列の中で一番大きい数字を取得
  4. .itemimgにその数字をcssで付加

やってることは綺麗じゃないかもだけど・・・
めっちゃ読み込み遅いと、がくつくかもしれないけど。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?