Jquery函数找出的最大高度

I want to find out that out of the given <li> which li has the maximum height? how do i write such function?

我想从给定的

中发现哪个li具有最大高度?我该怎么写这样的功能?

If there are n <li> elements of different size, content and height. I want to figure out the maximum height of the biggest <li> element.

如果有n

元素的大小,内容和高度不同。我想弄清楚最大的

元素的最大高度。

7 个解决方案

#1

Try this:

var max = -1;
$("li").each(function() {
    var h = $(this).height(); 
    max = h > max ? h : max;
});
alert(max);

#2

If you want a one liner

如果你想要一个衬垫

var max = Math.max.apply(Math, $("li").map(function() { return $(this).height(); }))

#3

var liMaxHeight = -1;
var node;
$("li").each(function(index) {
    if ($(this).outerHeight() > liMaxHeight) {
        liMaxHeight = $(this).outerHeight();
        node = index;
    }
});
alert("li with index " + node + " has height " + liMaxHeight);

Demo: http://jsfiddle.net/QUycm/

.outerHeight() includes padding and border. If don't want to include padding and border use height()

.outerHeight()包括填充和边框。如果不想包含填充和边框使用高度()

#4

you will need to get all the <li> elements, and do a manual loop to compare them against each other.

您将需要获取所有

元素,并进行手动循环以将它们相互比较。

#5

var max = -1 , current = null ;
var li = null ;

$("li").each(  function(i,node) {
    if(  ( current = $(this).height( ) ) > max ) max = current , li = node ;
}  ) ;

That will give you the node and its height at one swoop

这将一举为您提供节点及其高度

#6

Heres a solution.

这是一个解决方案。

We are going to loop through the elements and find the one with the highest height.

我们将遍历元素并找到具有最高高度的元素。

We can make use of jquery to easily do this.

我们可以使用jquery来轻松完成这项工作。

we will create an empty array.

我们将创建一个空数组。

Loop through our elements and store all the heights in this array

遍历我们的元素并将所有高度存储在此数组中

Then find the max height in that array

然后找到该数组中的最大高度

We will loop through again and set all our elements to that maximum height.

我们将再次循环并将所有元素设置为最大高度。

 var heights = [];
        $('.your-class-name').each(function () {
            heights.push($(this).height());
        });
        var maxHeight = Math.max.apply(null, heights);
        $('.your-class-name').each(function () {
            $(this).height(maxHeight);
        });

Kaboom.

#7

$.fn.equalHeightPlugin = function () {
                        var self = this;
                        return {
                            getMaxHeight: function () {
                                let max = 0;
                                self.each(function () {
                                    if ($(this).height() > max) max = $(this).height();    
                                })
                                return max;
                            },
                            setMaxHeight: function (botOffset) {
                                let _offSet_ = 0;
                                _offSet_ = (typeof arguments[0] === "undefined") ? 0 : botOffset;                                  
                                self.height(this.getMaxHeight() + _offSet_);
                            }
                        }
                    }

You can use the above plugin to make all chosen selectors the same height.

您可以使用上面的插件使所有选定的选择器具有相同的高度。

to call the plugin if you want to set maximum height for all selectors:

如果要为所有选择器设置最大高度,请调用插件:

var selector = $(".your-selector").equalHeightPlugin();
selector.setMaxHeight(offset);//you can have some pixels to adjust your height

If you want to get the maximum height, you can simply do this:

如果你想获得最大高度,你可以简单地这样做:

selector.getMaxHeight();

#1