如何使用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

回答

相關問題