Проблема, добавляющая максимальную ширину дочернего элемента к родительскому элементу

Question

Я просто столкнулся с проблемой с JQuery. Я сделал простой выпадающий навигация. Он работает отлично.

  <div id="navigation" class="grid-container"> 
       <div class="menu-wrap grid-85"> 
        <ul class="menu"> 
         <li><a href="">Home</a></li> 
         <li><a href="">About</a> 
          <ul class="submenu"> 
           <li><a href="">Sarsauto</a></li> 
           <li><a href="">Acedelco</a></li> 
          </ul> 
         </li> 
         <li><a href="">Services</a> 
          <ul class="submenu"> 
           <li><a href="">Purchase</a></li> 
           <li><a href="">Rental</a></li> 
           <li><a href="">MOT</a></li> 
          </ul> 
         </li> 
         <li><a href="">Catalog</a></li> 
         <li><a href="">Contacts</a> 
          <ul class="submenu"> 
           <li><a href="">Find Us</a></li> 
           <li><a href="">Contact Us</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
       <div class="clearfix"></div> 
      </div> 

Теперь я пытаюсь сделать родительские элементы ul.menu литий ширина такой же, как Bigest дочерний элемент ul.menu Li ul.submenu. Вот код JQuery:

$(document).ready(function(){ 
     var maxWidth = "0px"; 

     $("#navigation ul.submenu").each(function(){ 
      var currentWidth = $(this).css("width"); 
      if(currentWidth > maxWidth){ 
       maxWidth = currentWidth; 
      } 
     }); 

     $("#navigation ul.menu li").css("width",maxWidth); 
    }); 

Теперь, что она делает это добавляет атрибут стиль с ширина = 0px, istead из MaxWidth. Пожалуйста, помогите мне найти проблему. Спасибо заранее! :)

Answer 1

Попробуйте это вместо:

$(document).ready(function() { 
    var maxWidth = 0; 

    $("#navigation ul.submenu").each(function() { 
     var currentWidth = $(this).width(); 
    if (currentWidth > maxWidth) { 
     maxWidth = currentWidth; 
    } 
    }); 

$("#navigation ul.menu li").width(maxWidth); 
}); 

Answer 2

Если перед + символ в то время как вы запрашиваете ширину во время выполнения. Он преобразует это значение в значение integer. И вы назначили maxWidth как строку, что также вызовет проблемы при сравнении.

Попробуйте это,

$(document).ready(function(){ 
     var maxWidth = 0; 

     $("#navigation ul.submenu").each(function(){ 
      var currentWidth = +$(this).css("width"); 
      if(currentWidth > maxWidth){ 
       maxWidth = currentWidth; 
      } 
     }); 

     $("#navigation ul.menu li").css("width",maxWidth); 
    });