设置数据属性相等的不同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或组编写代码。我想做动态。就像数据行组具有值XXX一样，搜索具有相同值的数据课程，并将数据课程的高度设置为与data-rowgroup的divs高度相同。

Answer 1

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

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

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