/ / Wie setze ich die Höhe verschachtelter divs mit jQuery? - JQuery, CSS

Wie setze ich die Höhe verschachtelter divs mit jQuery? - JQuery, CSS

Ich benutze ein einfache jQuery-Funktion um die Höhe eines unmittelbaren Kind-Tags festzulegen. Ich muss das ändern, um nach verschachtelten Tags zu gehen. Zum Beispiel:

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

Für diese Reihe sollten alle Paneele die gleiche Höhe haben. Gerade jetzt, wenn ich anrufe $(".four").equalHeights(); Es wird nur die Höhe des ersten Inhalts festgelegtPanel. Ich brauche es, um die Höhen der Platten 1, 2 und 3 zu erhalten, dann gehe zurück und setze die maximale Höhe aller Platten in der Reihe auf die größte Höhe in der Reihe, in diesem Fall 250px.

Wenn ich es versuche $("row").equalHeights() das funktioniert auch nicht.

Ich habe versucht Einstellung display: table-cell; fügt jedoch zusätzlichen Overhead für das Styling hinzu.

Um zu verdeutlichen, für jede "Zeile" muss ich die einstellenHöhe aller Paneele. Wenn ich 3 verschiedene Zeilen habe, möchte ich nicht, dass alle 9 Panels auf die maximale Höhe in 1 Zeile gesetzt werden. Alle Zeilen sind unabhängig voneinander.

Antworten:

0 für die Antwort № 1

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

Hier ist der einfache Code:

$(".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 für die Antwort № 2

Sie müssen anrufen

$(".row").equalHeights()

Sieh dir das an GeigeIn diesem Beispiel müssen Sie auf klicken Set Height Taste, um die Funktion auszulösen.

Ich habe jedem Div eine Höhe / Farbe gegeben, um besser zu zeigen, wie es funktioniert.


0 für die Antwort № 3

Aktualisieren</ strong> Aufgrund von Kommentaren ging ich zurück und las und sahdie Lösung, die Sie wollen, ich nahm mein endgültiges Plugin-Schema und zeigte, wie Sie genau dasselbe von Ihrem und Aamirs Kommentar machen. Seine Antwort ist jedoch im Grunde das Gleiche wie mein erster Vorschlag unter der Zeile:

Mit Plugin:

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

Beispiel


/>
/>

Das ist ziemlich einfach. Finde einfach den höchsten in einem passenden Satz und setze alles auf diese Höhe. Oder wenn Sie eine bestimmte Höhe verwenden möchten, verwenden Sie das!

Wie so:

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

Beispiel

Oder, wenn Sie es als eine schnelle und schmutzige jQuery-Methode wollen:

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

Beispiel

| ODER |

Wenn Sie möchten, dass es als vollständiges jQuery-Plugin verwendet wird, wie zum Beispiel:

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

Fügen Sie einfach das folgende vollständige Plugin hinzu:

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

Beispiel

Kompilierte Version des Plugins:

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