jqueryの繰り返し処理で一番高さがあるセルを取得する方法

Question

再現したいこと
下のtableデータにて一番高さがある行に合わせて高さをそろえたい
jqueryで一番高さがあるtr行を指定して高さを合わせることはできましたが、今後セル内の高さは変動するので
指定するのではなく、eachメソッドの繰り返し処理で一番高さがあるtrを取得してmatchHeight.jsで高さを揃えたいです。
レクチャーいただけますと幸いです。

html

<div class="table-wrap">
    <table class="access_timetable match">
        <caption class="text-left">
            xxx
        </caption>
        <thead>
            <tr class="second-item">
                <th colspan="2"></th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="time2" rowspan="3"></td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text </td>
                <td>text</td>
            </tr>
            <tr>
                <td>text２</td>
                <td><span class="color_red">text</span></td>
                <td><span class="color_red">text</span></td>
                <td>text</td>
                <td><span class="color_red">text</span></td>
                <td><span class="color_red">text</span></td>
                <td>text<br>
                    text<br>
                    text<br>
                    text</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text<br>text</td>
                <td>text</td>
                <td>-</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
            </tr>


            <tr>
                <td class="time2" rowspan="1">text</td>
                <td>text</td>
                <td>text<br>text</td>
                <td>text<br>text</td>
                <td>text</td>
                <td>text<br>text</td>
                <td>text</td>
                <td>-</td>
            </tr>

            <tr>
                <td class="time2" rowspan="3">text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text</td>
                <td>text </td>
                <td>-</td>
            </tr>
            <tr>
                <td>text</td>
                <td><span class="color_red">text<br>
                    text</span><br>
                    text<br>
                    text</td>
                <td>text<br>
                    text<br>
                    text<br>
                    text</td>
                <td>text</td>
                <td><span class="color_red">text<br>
                    text</span><br>
                    text<br>
                    text</td>
                <td><span class="color_red">text<br>
                    text</span><br>
                    text<br>
                    text</td>
                <td>-</td>
            </tr>
            <tr>
                <td>text</td>
                <td>text<br>text</td>
                <td>text<br>
                    text<br>
                    text</td>
                <td>-</td>
                <td>text<br>text</td>
                <td>text</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>

 const h = $('.match tr td');

$(function() {
	const h = $('.match tr:nth-child(2) ').outerHeight();
	$(".match tr").css("height",h + "px");
	console.log(h)
  });

Answer 1

下記でどうでしょう。

$(function () {
  let h = 0;
  $(".match tr").each(function(){
    if(h < $(this).outerHeight()){
      h = $(this).outerHeight()
    };
  });
  $(".match tr").css("height", h + "px");
  console.log(h);
});

Comments

[nanashissss]

ありがとうございます。
無事に実現できました