jquery - 设置数据属性相等的不同div的高度

Question

我的问题是我想通过使用数据属性来设置不同 div 的高度。我的 HTML 标记如下所示：

<div data-curriculum="person">
   <h2>Person</h2>
</div>
<div data-curriculum="edc">
   <h2>education</h2>
</div>
[...]
<div class="row-group" data-rowgroup="person">
     [.. stuff ..]
</div>
<div class="row-group" data-rowgroup="edc">
     [.. stuff ..]
</div>
[...]

好吧，我可以用这段代码来实现它：

var rowGroup = $("[data-rowgroup*='person']").height();

$("div[data-curriculum*='person']").height(rowGroup);

但我不想为每个 div 或 group 写下代码。我想做动态的。就像 data-rowgroup 的值为 XXX 一样，搜索具有相同值的 data-curriculum 并将 data-curriculum 的高度设置为与 data-rowgroup 的 div 高度相同。

Answer 1

使用 CSS 可能有更好的方法来实现这种效果，但是如果你想像你问的那样用 jQuery 设置高度，这里有一个解决方案：

循环遍历.row-groupdiv 并执行与之前相同的操作，但替换硬编码的字符串：

$(".row-group").each(function () {
  var name = $(this).data("rowgroup"); // accesses data-rowgroup attribute
  var rowGroupHeight = $(this).height();
  $("div[data-curriculum*='" + name + "']").height(rowGroupHeight);
}