css - Jquery optimize biggest height determination -

real problem: have ul of li.column, line horizontally , wraps next line automatically using float:left css trick. (i hope trick common enough of understand doing?)

and because each li contain image links of equal width, i'm forcing li have equal width well, anchor element wrap text around in case long.

now, unfortunately have 1 of <li><a>long text</a></li> being wrapped , inevitably increased height of li container, breaks css layout of next rows.

i want set height li.columns match height instead, want programatically using jquery.

so partial code:

var allcolumns = $('li.column'); allcolumns .css('width','225px') .css('padding-right','20px').css('background-color','transparent'); $('li.column:nth-child('+numcol+'n)').css('padding-right','0px');  var maxheight = 0; allcolumns.each( function(index, item) {   var height = $(item).height();   if ( height > maxheight ) { maxheight = height; } } ); allcolumns.height(maxheight); 

is there can avoid each loop obtain maxheight using more native (optimized)?

unfortunately answer question there no magic answer. way it.

however, seems right tailoring <li> elements fit size of content. way fit content <li> elements (doing may depend on project's requirements) try these css rules. of following rules allow manipulate how columns handle longer amount of text. if can away it, wouldn't need jquery work

white-space:nowrap;

overflow:scroll; or overflow:hidden;