jQuery或Javascript将所有按钮设置为最宽按钮的宽度 [英] jQuery or Javascript to set all buttons to the width of the widest button

问题描述

我的客户希望我写一段jQuery首选的代码，该代码会将所有链接设置为最宽链接的相同宽度.这是HTML:

My client would like for me to write a sliver of code, jQuery preferred, that would set ALL the links to the same width of the widest link. Here's the HTML:

<div>
<h1>HEADER</h1>
<p style="text-align: right;" class="floatRight"><a href="#" class="small-button eLength"><span>BUTTON 1</span></a></p>
<p style="text-align: right;" class="floatRight"><a href="#" class="small-button eLength"><span>BUTTON 2</span></a></p>
<p style="text-align: right;" class="floatRight"><a href="#" class="small-button eLength"><span>BUTTON LONGEST</span></a></p>
</div>

CSS将所有三个按钮的最小宽度设置为180px.我正在寻找所有与课程有关的内容: eLength

The CSS sets all three buttons to a min-width of 180px. I'm looking for this all to hinge on the class: eLength

推荐答案

您可以这样获得最大宽度:

You can get the max width like this:

var widest = Math.max.apply(Math, $('.eLength').map(function() { 
    return $(this).width(); 
}));

并将其包装在一个银色插件中:

And to wrap this in a sliver plugin:

$.fn.widest = function() {
    return this.length ? this.width(Math.max.apply(Math, this.map(function() { 
        return $(this).width();
    }))) : this;
};

$('.eLength').widest();

这篇关于jQuery或Javascript将所有按钮设置为最宽按钮的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！