javascript - jQuery 或 Javascript 将所有按钮设置为最宽按钮的宽度

Question

我的客户希望我编写一小段代码，首选 jQuery，它将所有链接设置为与最宽链接相同的宽度。这是 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 将所有三个按钮的最小宽度设置为 180 像素。我正在寻找这一切取决于类(class):eLength

Answer 1

你可以这样得到最大宽度:

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

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

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

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