私はバックボーンと JQuery を使用しており、このリンクの方法 2 で説明されているように、バックボーン ビューを作成して同じ高さの列を作成したいと考えています。HTML は次のようになります。
<div class="container">
<div id="leftcolumn" class="set_equal_height"> … Lots Of Content … </div>
<div id="middlecolumn" class="set_equal_height"> … Lots Of Content … </div>
<div id="rightcolumn" class="set_equal_height"> … Lots Of Content … </div>
</div>
次のバックボーン ビューをまとめましたが、.each を使用するループが機能していないため、おそらく機能していません (ページはエラーなしで読み込まれますが、列の高さは JavaScript によって変更されません)。
define([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone) {
var SetEqualHeight = Backbone.View.extend({
initialize: function() {
var tallestcolumn = 0;
console.log(this.$el.height());
console.log(this.$el.attr("id"));
this.$el.each(function() {
currentHeight = $(this).height();
console.log(currentHeight);
if(currentHeight > tallestcolumn) {
tallestcolumn = currentHeight;
}
});
this.$el.height(tallestcolumn);
},
});
return SetEqualHeight;
});
次のように別の Wire 仕様で「el」引数を定義しています: { el: 'div.set_equal_height' }。上記のコードの console.log(this.$el.attr("id")) は正しく出力されます。ただし、「.each」ステートメント内の console.log は出力されず、「.each」に問題があることが示されます。この質問を見て、アンダースコアの「_.each」メソッドを試してみましたが、特定の配列ではなく特定のクラス (つまり、div.set_equal_height) を持つ要素を反復処理する方法がわかりませんでした。上記のバックボーン ビューで .each を機能させることについて誰か教えてもらえますか? お願いします!!!
参考までに、次の関数は単独で機能します (バックボーン ビューまたはビュー ヘルパーとして組み込むことを考えています)。
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestcolumn) {
tallestcolumn = currentHeight;
}
});
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($("div.set_equal_height"));
});