如何使用javascript在div上设置相等的宽度答案

【问题标题】：How to set equal width on divs with javascript如何使用javascript在div上设置相等的宽度
【发布时间】：2011-02-27 19:30:00
【问题描述】：

我有五行如下所示：这是一个带有lis的ul。我希望第一个 li“文本”在所有行上都相等。为此，我需要寻找最宽的 li，然后将新的 with 应用于所有 li。

(ul > li > 跨度 & ul)

正文> 李1 |李2 |李三
正文 > 李1 |李2 |李三
短>李1 |李2 |李三
Longer13456 > 李1 |李2 |李3

我使用以下函数来设置相等的高度。稍微修改了一下。但这没有任何意义！

function equalWidth() {
    var span = $('#tableLookAlike li.tr > span'),
        tallest = 0, 
        thisHeight = 0;

    setEqWidth = function(elem) {
        elem.each(function() {
            widest = 0;
            thisWidth = $(this).outerWidth();
            console.log(tallest, thisWidth)



// if I remove this it gives me the right width
                elem.each(function() {Width)
                    if (thisWidth > widest) {
                        widest = thisWidth;
                        elem.css({'width': widest});
                    }
                });
            });
        }

        setEqWidth(span);
    }

当我删除第二个 elem.each 时，日志显示为 92、69、68、118，当我将其放回时，它给了我 92、130、168、206。有谁知道这里发生了什么？

Aynway，我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery width equals

【解决方案1】：

您需要在循环结束时设置元素的宽度。否则最宽的值只是暂时的最高值。

setEqWidth = function(elem) {
    elem.each(function() {
        widest = 0;
        thisWidth = $(this).outerWidth();
        console.log(tallest, thisWidth)

        elem.each(function() {
                if (thisWidth > widest) {
                    widest = thisWidth;
                }
            });
        });


        elem.css({'width': widest});
    }

【讨论】：

谢谢你，我有点像这样解决了，但没有必要去 elem.each 两次..
好久没用jQuery了，谢谢指正。

【解决方案2】：

function equalWidth() {
    var span = $('#tableLookAlike li.tr > span'),
        widest = 0,
        thisWidth = 0;

    setEqWidth = function(elem) {
        widest = 0;
        elem.each(function() {
            thisWidth = $(this).outerWidth();

            if (thisWidth > widest) {
                widest = thisWidth;
            }
        });

        elem.css({ 'width': widest });
    }
    setEqWidth(span);
}

【讨论】：

【解决方案3】：

如果我要这样做，它会是这样的：

var greatestWidth = 0;   // Stores the greatest width

$(selector).each(function() {    // Select the elements you're comparing

    var theWidth = $(this).width();   // Grab the current width

    if( theWidth > greatestWidth) {   // If theWidth > the greatestWidth so far,
        greatestWidth = theWidth;     //    set greatestWidth to theWidth
    }
});

$(selector).width(greatestWidth);     // Update the elements you were comparing

【讨论】：

我需要将 $(this).width(); 更改为 > $(this).outerWidth(); 以考虑填充和边框。谢谢你。

【解决方案4】：

记住：显式设置宽度不会考虑相关元素上的任何padding，因此如果这些元素设置了padding-left 或padding-right，那么您最终的宽度将大于由于填充被合并到 CSS 盒子模型中的宽度中，您原来的最大宽度。

这甚至会使您的原始元素比开始时更宽。这同样适用于使用padding-top 和padding-bottom 设置高度。

如果您想获得超级准确，则需要将padding 考虑在内，类似于下面的代码（如果您不使用百分比、ems 或像素分数来设置padding，您可以用parseInt( )代替parseFloat( )):

var maxWidth = 0;
var $els = $('.your-selector');
$els.each(function(){
    var w = $(this).width();
    if(w > maxWidth){
        maxWidth = w;
    }

}

$els.each(function(){
    var $el = $(this);
    var padding = parseFloat($el.css('padding-left'),100) + parseFloat($el.css('padding-right'),100);

    $el.width(maxWidth - padding);
});

【讨论】：

【解决方案5】：

简洁一点

var widest = 0;
$("#tableLookAlike li.tr > span").each(function () { widest = Math.max(widest, $(this).outerWidth()); }).width(widest);

【讨论】：