Javascript Jquery函数找出<li>的最大高度

Jquery function to find out max height of <li>

提问by amit

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

我想找出给定的<li>哪个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<li>个不同大小、内容和高度的元素。我想找出最大<li>元素的最大高度。

回答by Igor Dymov

Try this:

尝试这个：

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

回答by Dogbert

If you want a one liner

如果你想要一个单衬

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

回答by Sotiris

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/

演示：http: //jsfiddle.net/QUycm/

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

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

回答by Mohammed Swillam

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

您需要获取所有<li>元素，并进行手动循环以将它们相互比较。

回答by FK82

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

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

回答by Ettore Raimondi

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

• 我们将创建一个空数组。
• 循环遍历我们的元素并将所有高度存储在此数组中
• 然后找到该数组中的最大高度

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

   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.

卡布姆。

回答by yong wu

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