jqueryのresizeを使用してeach内の処理をリサイズ毎に動かしたいです。

ulで作成したリスト内の<h4>の高さをリサイズ毎に取得して<h4>にインラインcssで追加しようとしています。
最初jqueryの呼び出し方を「$(window).on('load resize', function() {」にしただけだと動作せず別の質問を参考に下記2行を追加しました。
var windowWidth = window.innerWidth;
if (windowWidth < 2000) {}
※本当はリサイズ毎に動かしたいので↑の2000以下という数字は適当です。

ロード時には処理は動いて<h4>にstyle="height: ~;"の形で入っているのは確認できましたがリサイズ時は特に再計算されませんでした。
コンソールエラーもないので単純に記述の仕方が違うのだと思うのですが、ロード時とリサイズ時に毎回再計算するにはどうしたらいいでしょうか？

※<a>や<img>のurlは実際入っていますが質問内容に影響ないので省かせていただきました。
※<h4>は文章の長さが1行や3行以上など文章量がまちまちです。

html
1<ul class="list clearfix">
2    <li class="list_box">
3        <a href="">
4            <figure class="thumb_box">
5                <img src="" width="100%" height="auto" title="" alt="">
6            </figure>
7
8            <div class="thumb_detail">
9                <h4>リサイズ毎に高さを取得したい場所※文章の長さが未確定です</h4>
10                <div>サンプルテキスト</div>
11            </div>
12        </a>
13    </li><!-- /.list_box -->
14
15    <li class="list_box">
16        <a href="">
17            <figure class="thumb_box">
18                <img src="" width="100%" height="auto" title="" alt="">
19            </figure>
20
21            <div class="thumb_detail">
22                <h4>リサイズ毎に高さを取得したい場所※文章の長さが未確定です</h4>
23                <div>サンプルテキスト</div>
24            </div>
25        </a>
26    </li><!-- /.list_box -->
27    
28    <li class="list_box">
29        <a href="">
30            <figure class="thumb_box">
31                <img src="" width="100%" height="auto" title="" alt="">
32            </figure>
33
34            <div class="thumb_detail">
35                <h4>リサイズ毎に高さを取得したい場所※文章の長さが未確定です</h4>
36                <div>サンプルテキスト</div>
37            </div>
38        </a>
39    </li><!-- /.list_box -->
40</ul>

jquery
1<script>
2$(window).on('load resize', function() {
3    var windowWidth = window.innerWidth;
4    var txth = 0;
5
6    if (windowWidth < 2000) {
7        $(".list_box h4").each(function(){
8            if($(this).height() > txth){
9                txth = $(this).height();
10            }
11        });
12
13        $(".list_box h4").css("height", txth + "px");
14    }
15});
16</script>

行動規範の内容に同意します

回答1件

ベストアンサー

heightで縛ると値が固定されるためではないでしょうか。

js
1// $(".list_box h4").css("height", txth + "px");
2//                         ↓
3   $(".list_box h4").css("minHeight", txth + "px");
4```**動くサンプル：**[https://jsfiddle.net/pschm16f/](https://jsfiddle.net/pschm16f/)