テキストの高さを合わせたい

Question

###前提・実現したいこと
ざっくりいうと自動で複数要素のテキストをjs/jquery高さ揃えをしたいです。

###具体的には

<div>
  <ul>
    <li>
      <p>あああああああああああああああ</p>
    </li>
    <li>
      <p>いいいいいいいいい</p>
    </li>
  </ul>

  <ul>
    <li>
      <p>ああああああああああああああああああああああああああああああ</p>
    </li>
    <li>
      <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
    </li>
  </ul>

  <ul>
    <li>
      <p>あああああああ</p>
    </li>
    <li>
      <p>いいいいいいいいいいいいいいいいい</p>
    </li>
  </ul>
</div>

div: {
width:900px;
}

ul{
width:300px
float:left
}

/*クリアフィックスは省略*/

というhtmlがあって、
「あ」はあの高さで、「い」は「い」高さで「あ」「い」共通のクラスを使って高さ揃えをJsでしたいです。
「あ」と「い」に別々のクラスを使って高さ揃えはできるのですが、「う」のliを作成・追加した場合、js/jqueryを常に更新しないといけないで、できれば共通のクラスを使って高さ揃えをしたいのです。

どういう処理内容をかけばよいのでしょうか？

Comments

[yambejp]

「できれば共通のクラスを使って高さ揃えをしたい」とのことですが、クラスが設定されてるようには見えませんがなにかあるのでしょうか？

Answer 1

直接の回答ではありませんが、CSS でも対応可能だと思います。

【CSS Grid Layout を極める！（基礎編） - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363

【CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/css-grid-layout

【CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA】
https://ics.media/entry/15649

Comments

[satoko]

flexでいけるのはわかるのですが、じゃあjsでは？が非常に重要なところです…

[kei344]

flexでいけるとは回答していませんし、質問内容の状況では難しいと思いますよ。

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 2

MutationObserver

「う」のliを作成・追加した場合、js/jqueryを常に更新しないといけないで、できれば共通のクラスを使って高さ揃えをしたいのです。

MutationObserver でノード変更を監視し、変更がある度に高さを揃える処理を実行すれば良いでしょう。
ただし、MutationObserver は重い処理なので、むやみに使うものでもありません。
私がJavaScriptで監視するなら、ノード挿入処理内に高さを揃える処理を追加する事を試みます。

flexでいけるのはわかるのですが、じゃあjsでは？が非常に重要なところです…

一元管理やメンテナンスの観点からはCSSで管理する方が圧倒的にメリットが大きいと思いますが、JavaScriptで実装する必然性に何があるでしょうか。
gridやflex未対応ブラウザ用とか、実用性度外視で研究目的とか、何がしかの理由を添えると、別の最適解が出てくるかも知れません。

Re: satoko さん

Answer 3

こんなかんじですかね？

div: {width:900px;}
ul{width:300px;float:left;}
p{border:1px solid #000000;}

$(function(){
  var maxH={};
  $('#d ul').each(function(){
    $(this).find('li p').each(function(x){
      if(typeof maxH[x]=="undefined") maxH[x]=0;
      if($(this).height()>maxH[x]){
        maxH[x]=$(this).height();
      }
    });
  }).each(function(){
    $(this).find('li p').each(function(x,y){
      $(y).height(maxH[x]);
    });
  });
});

<div id="d">
  <ul>
    <li>
      <p class="p1">あああああああああああああああ</p>
    </li>
    <li>
      <p class="p2">いいいいいいいいい</p>
    </li>
  </ul>

  <ul>
    <li>
      <p class="p1">ああああああああああああああああああああああああああああああ</p>
    </li>
    <li>
      <p class="p2">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
    </li>
  </ul>

  <ul>
    <li>
      <p class="p1">あああああああ</p>
    </li>
    <li>
      <p class="p2">いいいいいいいいいいいいいいいいい</p>
    </li>
  </ul>
</div>

Comments

[think49]

投稿ミスの為、削除