/ / Jak ustawić wysokość zagnieżdżonych elementów div za pomocą jQuery? - jquery, css

Jak ustawić wysokość zagnieżdżonych elementów div za pomocą jQuery? - jquery, css

Używam a prosta funkcja jQuery aby ustawić wysokość natychmiastowego znacznika potomnego. Muszę to zmodyfikować, aby również następować po znacznikach zagnieżdżonych. Na przykład:

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

W tym wierszu wszystkie panele powinny mieć taką samą wysokość. Teraz, jeśli zadzwonię $(".four").equalHeights(); ustawi wysokość tylko na pierwszej zawartościpłyta. Potrzebuję go, aby uzyskać wysokości paneli 1, 2 i 3, a następnie wrócić i ustawić maksymalną wysokość wszystkich paneli w rzędzie na największą wysokość w rzędzie, w tym przypadku 250px.

Jeśli spróbuję $("row").equalHeights() to też nie działa.

Próbowałem ustawić display: table-cell; chociaż dodaje dodatkowy koszt do stylizacji.

Aby wyjaśnić, dla każdego "wiersza" muszę ustawićwysokość wszystkich paneli. Jeśli mam 3 różne rzędy, nie chcę, aby wszystkie 9 paneli było ustawione na maksymalną wysokość znajdującą się w jednym rzędzie. Wszystkie rzędy są niezależne od siebie.

Odpowiedzi:

0 dla odpowiedzi № 1

Próbny: http://jsfiddle.net/aamir/GYbZ9/4/

Oto prosty kod:

$(".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 dla odpowiedzi nr 2

Musisz zadzwonić

$(".row").equalHeights()

Zobacz Skrzypce: w tym przykładzie musisz kliknąć Set Height przycisk, aby uruchomić funkcję.

Podałem wysokość / kolor każdego elementu div, aby lepiej pokazać, jak działa.


0 dla odpowiedzi № 3

Aktualizacja</ strong> Na podstawie komentarzy wróciłem, przeczytałem i zobaczyłemrozwiązanie, które chcesz, wziąłem mój ostatni schemat wtyczek i pokazałem, jak zrobić dokładnie to samo z twojego i komentarza Aamira. Jego odpowiedź jest jednak w zasadzie tym samym co moja pierwsza sugestia poniżej linii:

Z wtyczką:

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

Przykład


/>
/>

To całkiem proste. Wystarczy znaleźć najwyższy w dopasowanym zestawie, a następnie ustawić wszystko na taką wysokość. Lub jeśli chcesz użyć określonej wysokości, Użyj tego!

Tak jak w przypadku:

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

Przykład

Lub, jeśli chcesz, jako szybką i brudną metodę 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();

Przykład

| OR |

Jeśli chcesz go jako pełną wtyczkę jQuery do użytku takiego jak:

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

Po prostu dodaj następującą pełną wtyczkę:

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

Przykład

Skompilowana wersja wtyczki:

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