CODEWITHSUNDEEP
jqueryhtml
morkro
morkro

Reputation: 4665

Set the height of different divs with data attributes equal

My problem is that I want to set the height of different div's equal by using data-attributes. My HTML markup is like the following:

<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>
[...]

Well, I can achieve it with this code:

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

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

But I don't wan't to write the code down for every div or group. I want to do it dynamic. Like the data-rowgroup has value XXX, search for data-curriculum with same value and set the height for data-curriculum same the divs height of data-rowgroup.

Upvotes: 1

Views: 290

Answers (1)

tcovo
tcovo

Reputation: 7740

There might be better ways to accomplish this effect with CSS, but if you want to set the heights with jQuery like you asked, here's a solution:

Loop through the .row-group divs and do the same thing you were doing before, but replacing the hard-coded string:

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

Upvotes: 1

Related Questions