How to set equal width in div with javascript

Question

I have five lines that look like this: This is ul with lis. I want the first li text to be equal to all lines. To do this, I need to find the widest li, and then apply a new one for all li.

(ul> li> span and ul)

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

I used the following function to set the same heights. Slightly changed it. But that makes no 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 delete the second item, and when I return it, it gives me 92, 130, 168, 206. Does anyone know what is going on here?

Aynway, how can I solve this?

Answer 1

 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 2

If I did this, it would be 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 3

A bit more concise

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

Answer 4

You need to set the width of the elements at the end of your loop. Otherwise, the widest value is only a temporary maximum 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 5

Remember: setting the width does not explicitly take into account any padding for the elements in question, so if these elements have the values padding-left or padding-right , you will gain a width greater than your original maximum width due to the addition of width to the CSS field.

It will even make your original element even wider than it started. The same applies to installation height using padding-top and padding-bottom .

If you want to be super accurate, you need to consider padding something like the code below (unless you use percantages or ems or a fraction 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); });