1

私の問題は、data-attributesを使用して、異なる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またはグループのコードを書き留めたくありません。ダイナミックにやりたいです。data-rowgroupの値がXXXであるように、同じ値のデータカリキュラムを検索し、データカリキュラムの高さをdata-rowgroupのdivの高さと同じに設定します。

4

1 に答える 1

1

CSSでこの効果を達成するためのより良い方法があるかもしれませんが、あなたが尋ねたようにjQueryで高さを設定したい場合は、ここに解決策があります：

divをループして、.row-group前と同じことを行いますが、ハードコードされた文字列を置き換えます。

$(".row-group").each(function () {
  var name = $(this).data("rowgroup"); // accesses data-rowgroup attribute
  var rowGroupHeight = $(this).height();
  $("div[data-curriculum*='" + name + "']").height(rowGroupHeight);
}
于 2013-03-23T00:37:39.657 に答える