div와 div에서 동일한 폭을 설정하는 방법

Question

다음과 같은 행이 다섯 개 있습니다. lis와 함께 사용하는 ul입니다. 첫 번째 li "text"가 모든 행에서 동일하게되기를 원합니다. 이렇게하려면 가장 넓은 리튬을 찾고 나서 모든 리튬에 적용해야합니다.

(UL> 리> 스팬 & UL)

텍스트> 리튬 1 | 리 2 | Li 3
Textlong> Li 1 | 리 2 | Li 3
Short> Li 1 | 리 2 | Li 3
Longer13456> Li1 | 리 2 | Li 3

나는 동등한 높이를 설정하기 위해 다음 기능을 사용했습니다. 조금 수정했습니다. 그러나 그것은 아무 의미가 없습니다! 내가 두 번째 elem.each을 제거 할 때

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

로그는 118, 68, 69, 92이다, 나는 다시 넣을 때 세드릭, 그것은 92, 130, 168, 206은 사람이 알고 있나요 나를 준다 여기에?

어윈 웨이, 어떻게 해결할 수 있습니까?

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

루프의 끝에서 요소의 너비를 설정해야합니다. 그렇지 않으면 가장 넓은 값은 일시적으로 가장 높은 값입니다.

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 3

나는 그것을 할 수 있었다면 ,이 같은 갈 것 :

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

을 기억 계정에 문제의 요소에 어떤 padding을하지 않습니다 명시 적으로 폭을 설정, 따라서 해당 요소에 padding-left 또는 padding-right이 설정되어 있으면 CSS 상자 모델의 너비에 패딩이 포함되어 원래 최대 너비보다 큰 너비로 감길 것입니다.

이렇게하면 원래 요소가 시작된 것보다 훨씬 넓어집니다. padding-top 및 padding-bottom으로 높이를 설정하는 경우에도 마찬가지입니다. 당신은 슈퍼 정확하고 싶다면

, 당신은 (당신이 padding을 설정 percantages 또는 EMS 또는 픽셀의 분수를 사용하지 않는 경우, 당신은 parseInt()을 사용할 수 있습니다 아래의 코드 같은 것을 함께 고려 padding을해야합니다 대신) 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

그것에 대해

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