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

Question

我试图根据所有表标题索引上对应的最高的div来动态地设置高度。我将使用MaterializeCSS，它负责地使标题显示块和内容从右向左滚动。

我会用一个超级简单的例子。

<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>

在我展示的示例中，我希望设置标题1到100 of的th的高度和标题2到200 of的th的高度。

我试了几件事，结果完全迷路了。也许我只是想用它变得太可爱。我尝试的逻辑是：

• 对于thead 中的每个
  • 在td中找到与th索引相同的tbody中的tr，并获得最大的高度
  • th设置高度

  ​ 我知道它会从$('th').each(function () { //magic goes here });开始 这里有一个代码，我必须展示我在这方面的进展：https://codepen.io/hdwebpros/pen/vjbwyw 提前感谢您的帮助或指导。我很感激你！

Answer 1

你可以这样做：

• 对于每一行tr
  • 对于每一列td
    • 计算具有相同索引的每一列的最大高度h[c]

​

​

• 用相同的索引为每一列指定最大高度

​

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>

​