/ / Ako nastavím výšku vnorených divov pomocou jQuery? - jquery, css

Ako nastavím výšku vnorených divov pomocou jQuery? - jquery, css

Používam a jednoduchá funkcia jQuery nastaviť výšku bezprostrednej detskej značky. Potrebujem upraviť toto aj po vnorených značkách. Napríklad:

<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>

V tomto riadku by všetky panely mali mať rovnakú výšku. Práve teraz, keď zavolám $(".four").equalHeights(); nastaví výšku iba na prvý obsahpanel. Potrebujem to, aby sa dostali výšky panelov 1, 2 a 3, potom sa vráťte a nastavte maximálnu výšku všetkých panelov v rade na najväčšiu výšku v riadku, v tomto prípade 250 pixelov.

Pokúsim sa $("row").equalHeights() to tiež nefunguje.

Snažil som sa nastaviť display: table-cell; aj keď pridáva ďalšie režijné náklady na styling.

Pre objasnenie, pre každý "riadok" musím nastaviťvýška všetkých panelov. Ak mám tri rôzne riadky, nechcem, aby boli všetky 9 panelov nastavené na maximálnu výšku nájdenú v jednom riadku. Všetky riadky sú navzájom nezávislé.

odpovede:

0 pre odpoveď č. 1

demo: http://jsfiddle.net/aamir/GYbZ9/4/

Tu je jednoduchý kód:

$(".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 pre odpoveď č. 2

Musíte zavolať

$(".row").equalHeights()

pozri na toto husle: v tomto príklade musíte kliknúť na Set Height tlačidlo pre spustenie funkcie.

Dal som výšku / farbu každému divu, aby som lepšie ukázal, ako to funguje.


0 pre odpoveď č. 3

aktualizovať</ Strong> Na základe komentárov som sa vrátil a čítal som a videlriešenie, ktoré chcete, som si vzal môj posledný plugin a ukázal, ako urobiť presne to isté z vašej a Aamirovej poznámky, ale jeho odpoveď je v podstate tá istá vec ako môj prvý navrhujem pod riadkom:

Pomocou doplnku:

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

príklad


/>
/>

To je celkom jednoduché. Stačí nájsť najvyššiu v súprave a potom všetko nastaviť na túto výšku. Alebo ak chcete použiť danú výšku, použite to!

Ako:

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

príklad

Alebo ak ju chcete ako rýchlu a špinavú metódu 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();

príklad

| OR |

Ak ju chcete použiť ako plný doplnok jQuery, ako napríklad:

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

Jednoducho pridajte nasledujúci plný doplnok:

(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);

príklad

Zložená verzia doplnku:

(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);