查找所有具有匹配索引的元素并获得最大属性

Question

I'm trying to dynamically set heights across all table headings based on the tallest corresponding div on its index. I will be using MaterializeCSS which responsively makes the headings display block and the content scroll right to left.

I'll use a super simple example.

<thead>
 <tr>
  <th>Heading 1</th>
  <th>Heading 2</th>
 </tr>
</thead>
<tbody>
  <tr>
    <td>This content is 100px</td> 
    <td>This content is 50px</td>
  </tr>
  <tr>
    <td>This content is 50px</td>
    <td>This content is 200px</td>
  </tr>
</tbody>

In the example I showed, I'd like to set the height of the th for heading 1 to 100px and the height of th for heading 2 to 200px.

I tried a few things and got completely lost. Maybe I was trying to get too cute with it. The logic I was attempting was:

• For each th in thead
  • Find td with same index as the th within each tr within tbody and get largest height
  • Set height of th

I get that it would start with $('th').each(function () { //magic goes here });

Here is a Codepen I have to show my progress on it: https://codepen.io/hdwebpros/pen/vjbwyw

Thanks in advance for any help or guidance. I appreciate it!

Answer 1

You could do the following:

• for each row tr
  • for each column td
    • compute the max height h[c] of every column with the same index
• assign the max height to each column with the same index

 var h = []; $("#table tr").each(function(r, tr) { $(tr).find("td").each(function(c, td) { if (c == 0) { h.push($(td).height()); } else { if ($(td).height() > h[c]) { h[c] = $(td).height(); } } }); }); for (var c = 0; c < h.length; c++) { $("#table td:eq(" + c + ")").css("height", h[c]); } 

 td { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <thead> <th>Heading 1</th> <th>Heading 2</th> </thead> <tbody> <tr> <td style="height: 100px;">This content is 100px</td> <td style="height: 50px;">This content is 50px</td> </tr> <tr> <td style="height: 50px;">This content is 50px</td> <td style="height: 200px;">This content is 200px</td> </tr> </tbody> </table>