jquery动态查找最长高度以将高度设置为div中的所有同级_Jquery_Css

jquery动态查找最长高度以将高度设置为div中的所有同级

jquery css

jquery动态查找最长高度以将高度设置为div中的所有同级,jquery,css,Jquery,Css,我目前正在尝试通过动态查找div中最长的p元素的高度来设置div中所有同级p元素的高度，而不设置最大高度，从我想动态地将高度设置为最长的p，因为我不知道最长的p 这是密码 $(document).ready(function() { setHeight('.col'); }); //global variable, this will store the highest height value var maxHeight = 100; function setHeight(c

我目前正在尝试通过动态查找div中最长的

元素的高度来设置div中所有同级

元素的高度，而不设置最大高度，从

我想动态地将高度设置为最长的

，因为我不知道最长的

这是密码

$(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'; 
}

函数parseRightTabs（）{
var高度=20；
var-ht=0；
对于（var i=1；iheight）高度=ht；
如果（i>1）Od（'rTest'+i）.style.display='none'；
}
如果（高度<50）高度=112；
Od（'rTests'）。style.height=高度+px'；
Od（'rtShow2'）。style.display=Od（'rtShow3'）。style.display=Od（'rtShow4'）。style.display='none'；
}

希望有人能帮忙

是链接，如果您单击右侧部分的推荐，然后单击1、2或3

这是js小提琴

有一个jQuery插件，用于设置列的高度，这将非常容易

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

大概是

...

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

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

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

...

我想你得绕两圈。一次获取最高值，然后再次将所有高度设置为该值

大概是

...

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

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

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

...

试试这个--

有一个插件可以做到这一点：

但是，原则上，您的代码应该执行以下操作：

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

有一个插件可以做到这一点：

但是，原则上，您的代码应该执行以下操作：

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

这是一个简单的代码

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

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

或

这是一个简单的代码

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

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

或

您可以扩展jQuery以拥有

matchHeight（）

方法。请注意以下步骤：

我们必须在

$（window.load（）

完成后调用此函数，否则最大高度读数将出错

然后，

overflow:hidden

会使我们的列元素将其高度捕捉到其内容，但只有在设置了宽度的情况下才起作用，并且大多数浮动列宽通常被设置为一般的良好实践。这一点很重要，否则在某些情况下，您的

$（This）.height（）

读数将为

然后，当我们最终到达最后一列时，我们使用

Math.max.apply（）

技巧来查找最大的列高度。但是，只有当我们使用选择器时，这种技巧才有效，

变量将指向单个列元素，而不是所有列元素。因此，我们使用

选择器

属性来获得它

然后，我们必须再次使用

选择器

属性来获取所有兄弟姐妹并设置他们的高度。请注意，我用

o.sibbins（）

而不是

$（o.selector）

尝试了这个方法，但失败了

（函数（$）{
$.fn.extend({
匹配高度：函数（）{
var o=$（本）；
o、 css（“溢出”、“隐藏”）；
if（o.is（'：最后一个子项'））{
var nMaxH=Math.max.apply（null，$（o.selector）.map（function（）{return$（this.height（）；}）.get（））；
$（o.selector）.高度（nMaxH）；
}
}
});
})（jQuery）；
$（窗口）。加载（函数（）{
//在本例中，下面的.row.col是DIV P，其中DIV=.row和P=.col
$（'.row.col'）.matchHeight（）；
});

您可以扩展jQuery，使其具有

matchHeight（）