Question

我有五行看起来像这样：这是一个带lis的ul。我希望第一个li“text”在所有行上都相等。要做到这一点，我需要寻找最宽的li，然后将新的应用于所有li。

（ul＆gt; li＆gt; span＆amp; ul）

文字＆gt;李1 | li 2 |李3 Textlong＆gt;李1 | li 2 |李3 简短＆gt;李1 | li 2 |李3 更长13456＆gt;李1 | li 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，我该如何解决这个问题？

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，您将会风由于填充在CSS框模型中并入宽度，因此宽度大于原始最大宽度。

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

如果你想要超精确，你需要考虑padding之类的代码（如果你没有使用percantages或ems或像素分数来设置{{1} }}，您可以使用padding代替parseInt( )）：

parseFloat( )

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

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

5 个答案: