tableごとに配下の要素の高さを動的に変更して揃えたい

各tableの中にdlが複数入る状態で、dt、ddに「child-○」（○は任意の数字であり、揃えたい要素で同じ数字を使用）とクラス名を付けて
同じクラス名の要素の中で一番高いものに高さを揃えようとしています。
以前も質問させていただき、childのクラス名が1つの場合は動作するようにできたのですが、上記仕様に変更する必要が出てきました。
前回質問した内容：https://teratail.com/questions/163194

通常でしたらheightLine.jsというプラグインを使用すれば可能なのですが、今回はtableごとに回す必要があるため似た機能を自作することになっています。

html
1<div class="wrapper">
2<table class="pheight">
3    <tbody>
4        <tr>
5            <td>
6                <dl>
7                    <dt class="cHeight-1">テキスト</dt>
8                    <dd class="cHeight-2">テキスト</dd>
9                    <dd class="cHeight-3">テキスト</dd>
10                    <dd class="cHeight-4">テキスト</dd>
11                </dl>
12                <dl>
13                    <dt class="cHeight-1">テキスト</dt>
14                    <dd class="cHeight-2">テキスト</dd>
15                    <dd class="cHeight-3">テキスト</dd>
16                    <dd class="cHeight-4">テキスト</dd>
17                </dl>
18                <dl>
19                    <dt class="cHeight-1">テキスト</dt>
20                    <dd class="cHeight-2">テキスト</dd>
21                    <dd class="cHeight-3">テキスト</dd>
22                    <dd class="cHeight-4">テキスト</dd>
23                </dl>
24            </td>
25        </tr>
26    </tbody>
27</table>
28<table class="pheight">
29    <tbody>
30        <tr>
31            <td>
32                <dl>
33                    <dt class="cHeight-1">テキスト</dt>
34                    <dd class="cHeight-2">テキスト</dd>
35                    <dd class="cHeight-3">テキスト</dd>
36                    <dd class="cHeight-4">テキスト</dd>
37                </dl>
38                <dl>
39                    <dt class="cHeight-1">テキスト</dt>
40                    <dd class="cHeight-2">テキスト</dd>
41                    <dd class="cHeight-3">テキスト</dd>
42                    <dd class="cHeight-4">テキスト</dd>
43                </dl>
44                <dl>
45                    <dt class="cHeight-1">テキスト</dt>
46                    <dd class="cHeight-2">テキスト</dd>
47                    <dd class="cHeight-3">テキスト</dd>
48                    <dd class="cHeight-4">テキスト</dd>
49                </dl>
50            </td>
51        </tr>
52    </tbody>
53</table>
54<table class="pheight">
55    <tbody>
56        <tr>
57            <td>
58                <dl>
59                    <dt class="cHeight-1">テキスト</dt>
60                    <dd class="cHeight-2">テキスト</dd>
61                    <dd class="cHeight-3">テキスト</dd>
62                    <dd class="cHeight-4"></dd>
63                </dl>
64                <dl>
65                    <dt class="cHeight-1">テキスト</dt>
66                    <dd class="cHeight-2">テキスト</dd>
67                    <dd class="cHeight-3">テキスト</dd>
68                    <dd class="cHeight-4">テキスト</dd>
69                </dl>
70                <dl>
71                    <dt class="cHeight-1">テキスト</dt>
72                    <dd class="cHeight-2">テキスト</dd>
73                    <dd class="cHeight-3">テキスト</dd>
74                    <dd class="cHeight-4">テキスト</dd>
75                </dl>
76            </td>
77        </tr>
78    </tbody>
79</table>
80</div>

現在、「child-5」までを決め打ちで下記jsを書き凌いでいますが、「child-6」以上のクラス名を使用すると動作しなくなるため困っています。

js
1$(window).load(function () {
2    $('.pHeight').each(function () {
3        var cHeight1 = $(this).find(".cHeight-1");
4        var cHeight2 = $(this).find(".cHeight-2");
5        var cHeight3 = $(this).find(".cHeight-3");
6        var cHeight4 = $(this).find(".cHeight-4");
7        var cHeight5 = $(this).find(".cHeight-5");
8
9        var heights1 = cHeight1.map(function () {
10            return $(this).outerHeight();
11        }).get();
12        cHeight1.css({
13            height: Math.max.apply(null, heights1) + "px"
14        });
15        
16        var heights2 = cHeight2.map(function () {
17            return $(this).outerHeight();
18        }).get();
19        cHeight2.css({
20            height: Math.max.apply(null, heights2) + "px"
21        });
22        
23        var heights3 = cHeight3.map(function () {
24            return $(this).outerHeight();
25        }).get();
26        cHeight3.css({
27            height: Math.max.apply(null, heights3) + "px"
28        });
29        
30        var heights4 = cHeight4.map(function () {
31            return $(this).outerHeight();
32        }).get();
33        cHeight4.css({
34            height: Math.max.apply(null, heights4) + "px"
35        });
36        
37        var heights5 = cHeight5.map(function () {
38            return $(this).outerHeight();
39        }).get();
40        cHeight5.css({
41            height: Math.max.apply(null, heights5) + "px"
42        });
43    });
44});

こちらのように書いてみたのですが動かず、お知恵をお借りしたく投稿させていただきました。

js
1$(window).load(function () {
2  
3  $(".pHeight").each(function (p) {
4    var parent = $(this);
5    var child_ele = $(this).find("[class*='cHeight']");
6   
7    var heights = child_ele.map(function () {
8      return $(this).outerHeight();
9    }).get();
10    console.log(p+":"+heights);
11  
12    child_ele.css({
13        height: Math.max.apply(null, heights) + "px"
14    });
15
16  });
17 
18});

何度も似たような質問になってしまい恥ずかしい限りですが、よろしくお願いいたします。

yambejp

2018/12/14 06:29

「同じクラス名の要素の中で一番高いものに高さを揃えよう」以前の質問からちょっと疑問でしたが、高さの違う例をだして、どこをどれにあわせたいのか書いてみて下さい

x_x

2018/12/14 07:01

heightLine.jsというのはこれでしょうか？ http://blog.webcreativepark.net/2007/07/26-010338.html 少し試してみましたが、適切にclassをつけることで今回の要件を満たすと思います。

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

回答1件

.pHeight⇒.pheight でとりあえず動きましたよ。

JavaScript
1$( function () {
2
3  //$(".pHeight").each(function (p) {
4  $(".pheight").each(function (p) {
5    var parent = $(this);
6    var child_ele = $(this).find("[class*='cHeight']");
7
8    var heights = child_ele.map(function () {
9      return $(this).outerHeight();
10    }).get();
11    console.log(p+":"+heights);
12
13    child_ele.css({
14        height: Math.max.apply(null, heights) + "px"
15    });
16
17  });
18
19});
20```**動くサンプル：**[https://jsfiddle.net/o6n7a8ws/](https://jsfiddle.net/o6n7a8ws/)