Sto usando un semplice funzione jQuery per impostare l'altezza di un tag secondario immediato. Ho bisogno di modificare questo per andare anche dopo tag nidificati. Per esempio:
<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>
Per questa riga, tutti i pannelli dovrebbero avere la stessa altezza. In questo momento se chiamo $(".four").equalHeights(); imposterà solo l'altezza sul primo contenutopannello. Ne ho bisogno per ottenere le altezze dei pannelli 1, 2 e 3, quindi tornare indietro e impostare l'altezza massima di tutti i pannelli della fila alla massima altezza della fila, in questo caso 250 px.
Se ci provo $("row").equalHeights() anche questo non funziona.
Ho provato a impostare display: table-cell; sebbene aggiunga l'overhead supplementare per lo styling.
Per chiarire, per ogni "riga" ho bisogno di impostare ilaltezza di tutti i pannelli. Se ho 3 file diverse, non voglio che tutti i 9 pannelli siano impostati sull'altezza massima trovata in 1 riga. Tutte le file sono indipendenti l'una dall'altra.
risposte:
0 per risposta № 1demo: http://jsfiddle.net/aamir/GYbZ9/4/
Ecco il codice semplice:
$(".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 per risposta № 2
Devi chiamare
$(".row").equalHeights()
guarda questo Violino: in questo esempio è necessario fare clic sul Set Height pulsante per attivare la funzione.
Ho dato un'altezza / colore a ogni div per mostrare meglio come funziona.
0 per risposta № 3
Aggiornare</ Strong> Sulla base dei commenti sono tornato a leggere e vederela soluzione che vuoi, ho preso il mio schema di plugin finale e ho mostrato come fare esattamente la stessa cosa dal tuo e dal commento di Aamir. La sua risposta, tuttavia, è fondamentalmente la stessa cosa del mio primo suggerimento sotto la linea:
Con Plugin:
$(".row").each(function(i) { $(this).find(".panel").equalHeights() });
/>
/>
Questo è abbastanza facile. Trova solo il più alto in un set abbinato, quindi imposta tutto a quell'altezza. O se vuoi usare una certa altezza, usa quello!
Così:
var mh = 0;
$(".columns").each(function(i) { mh = mh > $(this).height() ? mh : $(this).height(); })
.height(mh);
Oppure, se lo vuoi come metodo jQuery veloce e sporco:
$.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();
| O |
Se lo vuoi come un completo plugin jQuery da usare come:
$(".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");
Basta aggiungere il seguente plug-in completo:
(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);
Versione compilata del plugin:
(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);