How to set equal width on divs with javascript

Question

I've got five rows that looks like this: It's an ul with lis. I want the first li "text" to be equal on all rows. To do this I need to look for the widest li, then apply the new with to all li's.

(ul > li > span & ul)

Text > Li 1 | li 2 | Li 3
Textlong > Li 1 | li 2 | Li 3
Short > Li 1 | li 2 | Li 3
Longer13456 > Li 1 | li 2 | Li 3

I've used the following function for setting equal hights. Modified it a bit. But it does not make any sense!

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

The log shows 92, 69, 68, 118 when I remove the second elem.each, and when I put it back, it gives me 92, 130, 168, 206. Does anyone know whats going on here?

Aynway, how do I solve this?

Answer 1

You need to set the width of the elements at the end of your loop. Otherwise the widest value is just a temporary highest value.

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

Answer 3

If I was to do it, it would go something like this:

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 4

Remember: setting the width explicitly will not take into account any padding on the elements in question, so if those elements have padding-left or padding-right set, you're going to wind up with a width greater than your original maximum width due to padding being incorporated into width in the CSS box model.

This will even make your original element even wider than it started with. The same applies to setting height with padding-top and padding-bottom.

If you want to be super-accurate, you'll need to take padding into account with something like the code below (if you're not using percantages or ems or fractions of pixels to set padding, you can use parseInt( ) instead of 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

A bit more concise

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