Question

我目前正试图弄清楚如何通过在不设置最大高度的情况下动态查找该div中最长p元素的高度来设置div中所有兄弟p元素的高度，得到了here

的代码

我想动态地将动态高度设置为最长p，因为我不知道最长p的高度

这是代码

$(document).ready(function() {
    setHeight('.col');
});



//global variable, this will store the highest height value
var maxHeight = 100;

function setHeight(col) {
    //Get all the element with class = col
    col = $(col);

    //Loop all the col
    col.each(function() {       

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

    //Set the height
    col.height(maxHeight);
 }

如果有人知道如何做到这一点会很棒

我有一个原始的javascript解决方案，但它必须是jquery

function parseRightTabs() {
    var height = 20;
    var ht = 0;
    for(var i=1; i<5; i++) {
        ht = Od('rTest'+i).offsetHeight;
        if(ht>height) height = ht;
        if(i>1)Od('rTest'+i).style.display='none';
    }
    if(height < 50) height = 112;
    Od('rTests').style.height = height + 'px';
    Od('rtShow2').style.display = Od('rtShow3').style.display=Od('rtShow4').style.display = 'none'; 
}

希望有人可以提供帮助

here是链接，如果您点击右侧部分的推荐并点击1,2或3

这里是js小提琴

http://jsbin.com/owiju5/2/edit

Answer 1

试试这个 -

var $paragraphs = $('div p');

var heights = $paragraphs.map(function() {
   return $(this).height();
});

var maxHeight = Math.max.apply(this, heights);

$paragraphs.height(maxHeight);

Answer 2

有一个插件可以执行此操作：Equal Column Heights

但是原则上你的代码应该是这样的：

$elems = $('.my_columns');
var max_height = 0;
$elems.each(function(idx, elem) {
  max_height = Math.max(max_height, $(elem).height());
});
$elems.height(max_height);

Answer 3

有一个jQuery插件可以设置列的高度，这将使这很容易。

http://brenelz.com/blog/jquery-custom-plug-in-equal-height-columns/

Answer 4

我认为你必须循环两次。一旦获得最高值，然后再次将所有高度设置为该值。

类似

...

$(".col").each(function() {       

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

$(".col").each(function() {       
        $(this).height(maxHeight);
    });

...

Answer 5

这是简单的代码

var heights = $("element").map(function ()
{
return $(this).height();
}).get(),

MaxHeight = Math.max.apply(null, heights);

或

var highest = null;
 var hi = 0;
$(".testdiv").each(function(){
var h = $(this).height();
 if(h > hi){
 hi = h;
 highest = $(this);  
 }    
});

highest.css("background-color", "red");

Answer 6

您可以扩展jQuery以使其具有matchHeight()方法。请注意以下步骤：

我们必须在$(window).load()完成之后才调用此函数，否则最大高度读数将是错误的。
然后，overflow:hidden使我们的列元素将其高度对齐到其内容，但仅在设置了它们的宽度时才起作用，并且通常将大多数浮动列的宽度都设置为一种良好习惯。这一点很重要，否则您的$(this).height()读数在某些情况下将是0。
然后，当我们最终到达最后一列时，我们使用Math.max.apply()技巧来找到最大的列高。但是，该技巧仅在拥有选择器的情况下有效，并且o变量将移至单个列元素，而不是所有列元素。因此，我们利用selector属性来实现这一点。
然后，再次，我们必须使用selector属性来捕获所有同级并设置其高度。请注意，我尝试使用o.siblings()而不是$(o.selector)进行了此操作，但这无法正常工作。

(function($) {
$.fn.extend({
  matchHeight: function() {
    var o = $(this);
    o.css('overflow','hidden');
    if (o.is(':last-child')) {
      var nMaxH = Math.max.apply(null,$(o.selector).map(function(){return $(this).height();}).get());
      $(o.selector).height(nMaxH);
    }
  }
});
})(jQuery);

$(window).load(function(){
  // The .row .col below is DIV P in your case, where DIV = .row and P = .col
  $('.row .col').matchHeight();
});

jquery动态找到最长的高度，以设置div中所有兄弟的高度

6 个答案: