はい、ネイティブ プロパティまたは jQuery を使用して高さを調整すると、結果の高さの値が新しい値セットを反映していないように見えます。そのため、同じページのインタラクション中に要素を動的に調整するには、これまで、高さのヒューリスティックに頼る必要がありました。
最終的に、要素内のコンテンツを評価し、完全に正確ではないにしても、許容できるプロキシの高さの値を構築します。たとえば、22 個のラベル フィールドの元のセットを含むボックスがあるとします。
ユーザーが親の値またはオプションを調整すると、0 から完全な 22 までの任意の数の結果フィールドになる可能性があります。
したがって、ユーザー イベントの後に 10 個残っている場合は、表示されている要素をカウントアップして高さを計算する関数を実行します。したがって、10 フィールド x 22 ピクセルは、含まれている要素を約 220 ピクセルに再調整することを意味します。
具体的には、デフォルトの高さ、ベースの高さ (テキストや指示など、常に公開されている調整不可能な要素を許可します)、および要素の高さの乗数を割り当てる抽象化された関数があります。
ロード時およびイベント間で、要素コンテナーをデフォルトの高さに設定しました。変数要素を数えた後、変数要素に乗数を掛け、それをベースの高さに加算して値を計算します。
これまでのところ、これは私ができる最高のものであり、かなり単純です. jQuery セレクターを使用すると、カウントするのに数行しかかからず、高さを計算して設定するのにさらに数行かかります。
注意: これは、コンテンツによって高さを自動的に調整しない要素にのみ必要であることに注意してください。これの最大の違反者は、私の場合、この問題が発生する jQuery タブです。ほとんどの操作されていない相対高さ要素は、要素が display = block||none の間で切り替わるため、スペースを自動調整します。
コード例を次に示します。
setElemHeight = function(options) {
var _elem = options.containerElement;
var _nBase = options.nBaseHeight;
var _nMltplr = options.nMultiplierHeight;
// COUNT ROWS
var _nCnt = 0;
$( '#' + _elem.id + ' div div:first-child > input').each( function() {
if(this.style.display != 'none') _nCnt++;
});
$(_elem).height(_nBase + (_nCnt * _nMltplr));
}
私は自分の目的のために十分に抽象化しましたが、セレクターの子要素が動的になるように、もう少し先に進めることができます。