/ / jQueryでネストされたdivの高さを設定するにはどうすればよいですか? - jquery、css

jQueryでネストされたdivの高さを設定するにはどうすればよいですか? - jquery、css

私は 簡単なjQuery関数 直接の子タグの高さを設定します。ネストされたタグの後にもこれを変更する必要があります。例えば:

<div class="row">
<div class="four columns">
<div class="panel green">
// content panel 1 200px high based on content
</div>
</div>
<div class="four columns">
<div class="panel green">
// content panel 2 250px high based on content
</div>
</div>
<div class="four columns">
<div class="panel green">
// content panel 3 150px high based on content
</div>
</div>
</div>

この行では、すべてのパネルの高さが同じでなければなりません。今私が電話したら $(".four").equalHeights(); 最初のコンテンツの高さのみを設定しますパネル。パネル1、パネル2、パネル3の高さを取得してから、行のすべてのパネルの最大高さを行の最大高さに設定する必要があります。この例では250ピクセルです。

試してみたら $("row").equalHeights() これはどちらもうまくいかない。

私は設定しようとしました display: table-cell; スタイリングのオーバーヘッドが増えます。

明確にするために、各「行」について、すべてのパネルの高さ。 3つの異なる行がある場合、9つのパネルすべてを1行にある最大の高さに設定する必要はありません。すべての行は互いに独立しています。

回答:

回答№1は0

デモ: http://jsfiddle.net/aamir/GYbZ9/4/

ここに簡単なコードを示します:

$(".row").each(function(){
var $panels = $(this).find(".panel");
var tallest = 0;
//find tallest
$panels.each(function () {
var ph = $(this).height();
if (ph > tallest) tallest = ph;
});
$panels.height(tallest);
});

回答№2の場合は0

あなたは電話する必要があります

$(".row").equalHeights()

これを参照してください フィドル:この例では、 Set Height ボタンを押して機能をトリガーします。

どのように機能するかをより良く示すために、各部門に高さ/色を付けました。


回答№3の場合は0

更新</ strong> コメントに基づいて私は戻って読んで見ました私は最終的なプラグインスキームを取って、あなたとAamirのコメントからまったく同じことをする方法を示しましたが、彼の答えは基本的に私の最初の示唆と同じです:

プラグインで:

$(".row").each(function(i) { $(this).find(".panel").equalHeights() });


/>
/>

これはかなり簡単です。マッチしたセットで一番高いものを見つけて、その高さまですべてを設定してください。または、特定の高さを使用する場合は、それを使用します。

そのようです:

var mh = 0;
$(".columns").each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); })
.height(mh);

または、クイックで汚れたjQueryメソッドを使用する場合は、次のようにします。

$.fn.equalHeights = function (e) {
var mh = 0;
$(this).each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); });
return $(this).height(mh);
};

// use as:
$(".columns").equalHeights();

| OR |

あなたは、次のような使い方のための完全なjQueryプラグインとして望むなら、

$(".four").equalHeights();  //  set all elements matching selector to height of tallest

$(".four").equalHeights(100);   //  set all elements matching selector to height of integer given

$(".four").equalHeights("200"); //  set all elements matching selector to height of string given

//  Same as top 3 but written alternatly in accordance with jQuery mark-up style
$.equalHeights(".four"); || $.equalHeights($(".four"));
$.equalHeights($(".four"), 100);
$.equalHeights($(".four"), "200");

次のフルプラグインを追加するだけです:

(function($) {
if (!$.equalHeights) {
$.extend({
equalHeights: function() {
var args = arguments,
elm,
mh = 0;
if (args.length) {
for (x in args) {
switch (typeof args[x]) {
case "number":
mh = args[x];
break;
case "object":
if (args[x] instanceof jQuery) elm = args[x];
break;
case "string":
if (!elm) {
if ($(args[x]).length) elm = $(args[x]);
else if (!mh) if (args[x].replace(/D/g, "")) mh = args[x].replace(/D/g, "");
}
else if (!mh) if (args[x].replace(/D/g, "")) mh = args[x].replace(/D/g, "");
break;
}
}
}

if (elm instanceof jQuery) {
if (!mh) elm.each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); });
return elm.height(mh);
}
else {
return "Error: Cannot find Selector";
}
}
});
$.fn.extend({
equalHeights: function() {
var args = [$(this)];
if (arguments.length) for (x in arguments) args.push(arguments[x]);
return $.equalHeights.apply($, args);
}
});
}
})(jQuery);

プラグインのコンパイル済みバージョン:

(function($){$.equalHeights||($.extend({equalHeights:function(){var a=arguments,c,b=0;if(a.length)for(x in a)switch(typeof a[x]){case "number":b=a[x];break;case "object":a[x]instanceof jQuery&&(c=a[x]);break;case "string":c?b||a[x].replace(/D/g,"")&&(b=a[x].replace(/D/g,"")):$(a[x]).length?c=$(a[x]):b||a[x].replace(/D/g,"")&&(b=a[x].replace(/D/g,""))}return c instanceof jQuery?(b||c.each(function(a){b=b>$(this).height()?b:$(this).height()}),c.height(b)):"Error: Cannot find Selector"}}),$.fn.extend({equalHeights:function(){var a=[$(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return $.equalHeights.apply($,a)}}))})(jQuery);