如何使用javascript在div上设置等宽

Question

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

(ul > li > span & ul)

文本 >李1 |李2 |李3
文本长>李1 |李2 |李3
短>李1 |李2 |李3
更长13456>李1 |李2 | Li 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。 有谁知道这里发生了什么事？

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

Answer 1

如果我这么做的话，事情会是这样的：

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

Answer 2

更简洁一点

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

Answer 3

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

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

Answer 4

请记住：显式设置宽度不会考虑相关元素上的任何 padding，因此如果这些元素具有 padding-left 或 padding-right set，由于 CSS 盒模型中的 padding 已合并到宽度中，您最终的宽度将大于原始最大宽度。

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

如果您想要超级准确，则需要使用类似于下面的代码的内容来考虑 padding （如果您不使用百分比或 em 或像素分数来设置 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);
});

Answer 5

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