如何使用javascript设置等宽divs

我有五行看起来像这样：这是一个ul与lis。我希望第一个“文本”在所有行上都相等。要做到这一点，我需要寻找最广泛的李，然后将新的应用于所有的李。如何使用javascript设置等宽divs

（ul> li>跨度& UL）

文本>李1 | li 2 | Li 3
Textlong> Li 1 | li 2 | Li 3
Short> Li 1 | li 2 | Li 3
更长时间13456> Li 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); 
    }

日志显示92，69，68，118，当我删除第二个elem.each，当我把它放回去，它给了我92，130，168，206 有谁知道怎么回事在这？

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

来源

2010-06-04 patad

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

来源

2010-06-04 14:02:11 patad

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

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

来源

2010-06-04 13:47:11 HoLyVieR

感谢的是，我还挺解决了它这样的，但没有必要去elem.each两次.. – patad 2010-06-04 14:02:53

我没有”不要使用jQuery请稍等片刻，谢谢修正。 – HoLyVieR 2010-06-04 14:19:44

如果我这样做，它会去是这样的：

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

来源

2010-06-04 14:02:40 user113716

记住：设置宽度明确不会考虑对有问题的元件的任何padding，所以如果这些元素设置了padding-left或padding-right，那么由于在CSS盒模型中将宽度并入了填充，因此您将打开宽度大于原始最大宽度的宽度。

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

如果你想成为超级准确，你需要采取padding考虑的东西，如下面的代码（如果你不使用percantages或EMS或像素的分数设置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); 
});

来源

2010-06-04 14:31:02 ajm

有点更简洁

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

来源

2010-06-05 04:48:48 Luc

辉煌！非常简洁... – salihcenap 2014-10-29 09:00:22

如何使用javascript设置等宽divs

回答

相关问题