/ / Как да настроя височината на вложени divs с jQuery? - jquery, css

Как да задам височината на вложени divs с jQuery? - jquery, css

Аз използвам a проста функция 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, след което се върнете и задайте максималната височина на всички панели в реда до най-голямата височина в реда, в този случай 250px.

Ако се опитам $("row").equalHeights() това също не работи.

Опитах да настройвам display: table-cell; въпреки че добавя допълнителни режийни разходи за оформяне.

За да изясня, за всеки "ред" трябва да задамвисочината на всички панели. Ако имам 3 различни реда, не искам всичките 9 панела да бъдат нагласени до максималната височина, която се намира в един ред. Всички редове са независими една от друга.

Отговори:

0 за отговор № 1

Демонстрация: 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);
});

0 за отговор № 2

Трябва да се обадите

$(".row").equalHeights()

виж това цигулка: в този пример трябва да кликнете върху Set Height за да задействате функцията.

Дадох височина / цвят на всяко парче, за да покажа по-добре как работи.


0 за отговор № 3

Актуализация</ Силен> Въз основа на коментарите се върнах и прочетох и видяхрешението, което искате, взех последната ми схема за плъгини и показах как да направя точно същото нещо от твоя и от коментарите на Аамир. Неговият отговор обаче е по същество същото нещо, както първото ми предложение под линия:

С Plugin:

$(".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();

пример

| ИЛИ |

Ако го искате като пълен 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);