Help us understand the problem. What is going on with this article?

列の中に高さの違う要素があった時の対処法

はじめに

最近受けた案件で列ごとに高さや横幅が違う画像が動的に生成をされて、テキストの位置がずれて表示されてしまうというようなことがあった。下記のような感じです。
スクリーンショット 2019-11-26 1.09.12.png

個人的には画像の大きさが違うなんてやめてくれ。。なんて思いましたが。
ですが便利なプラグインでjquery.heightLine.jsというものがあり対象の要素の高さを揃えてくれるらしい。
とりあえずやってみよう。

script.js
    var list = $(".block .box li .color");
    list.heightLine();

スクリーンショット 2019-11-26 1.09.58.png

お、高さが揃った!と思ったんですが要素に対して実行する指定した要素の一番大きな高さを基準にされた。。上の行がスカスカや。。
できれば列ごとの一番大きな高さを持ったものを基準にして欲しい。

結果はこうなりました。

script.js
    const box = $(".block .box");
    let count = 0;
    box.each(function(){
      $(this).find("li").each(function(index){
        const li = $(this);
        index = li.index();
        if ((index % 3) === 0){
          count++;
        }
        li.find(".color").addClass("line" + count);
      });
    });
    for (let i = count; i > 0; i--) {
      $(".block .box li .color.line" + i).heightLine();
    }

やっていることを簡単にまとめると
・リスト要素をeachで回す。
・0と3の倍数でcountを増やす。
・countの数字をクラス名に付与する。
・countの数はリストの列の数と等しくなるのでfor文でそのクラスの数だけheightLine()を使い高さを揃える。

スクリーンショット 2019-11-26 1.10.13.png

ちなみにこちらは会社の上司がサクッとやってくれたやつなんですが、僕自身もこのくらいをサクッとできるようになりたい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした