jQuery通過多個ul標籤循環並根據li標籤設置獨特的寬度

我的標題kinda解釋了這個問題。我需要遍歷多個ul標籤並獲取li標籤的寬度，所以我可以設置ul標籤的寬度。jQuery通過多個ul標籤循環並根據li標籤設置獨特的寬度

這是我的jQuery代碼：

var ul_width = 0; 
var li_width = 0; 
$('#menu-topp-meny .parent-item').each(function(){ 
    $('#menu-topp-meny .parent-item ul').each(function(){ 
     $('li').each(function(){ 
      li_width += $(this).width(); 
     }); 
     ul_width = li_width; 
     $(this).css({'width': ul_width + 'px'}); 
     li_width = 0; 
     ul_width = 0; 
    }); 
});

，這是我的html：

<nav class="menu-topp-meny-container"> 
    <ul id="menu-topp-meny" class="menu"> 
     <li id="menu-item-116" class="parent-item"><a href="http://test3.clydemarketing.com/om-monster-2/">Om Monster</a> 
      <ul class="sub-menu"> 
       <span class="sub-centering"> 
        <li id="menu-item-262"><a href="http://test3.clydemarketing.com/entertainment/om-oss/">Om Oss</a></li> 
       </span> 
      </ul><span class="sub-menu-wrapper"></span> 
     </li> 
     <li id="menu-item-225" class="parent-item"><a href="http://test3.clydemarketing.com/entertainment/om-oss/">Avdelinger</a> 
      <ul class="sub-menu"><span class="sub-centering"> 
       <li id="menu-item-263"><a href="http://test3.clydemarketing.com/entertainment/produksjoner/">Entertainment</a></li> 
       <li id="menu-item-260"><a href="http://test3.clydemarketing.com/entertainment/kontakt/">Kontakt</a></li> 
       <li id="menu-item-261"><a href="http://test3.clydemarketing.com/entertainment/arkiv/">Arkiv</a></li> 
      </ul></span><span class="sub-menu-wrapper"></span> 
     </li> 
     <li id="menu-item-26"><a href="http://test3.clydemarketing.com/kontakt/">Kontakt</a></li> 
     <li id="menu-item-25"><a href="http://test3.clydemarketing.com/jobb/">Jobb</a></li> 
    </ul> 
</nav>

現在就可以了jQuery計算所有李標籤是parrent項UL內。我需要它來計算當前parrent-ul中的li標籤。

編輯：我試圖用「父項目」項目的類來計算ul中每個li的寬度，然後設置當前ul項目的寬度。

來源

2012-03-29 Ole Henrik Skogstrøm

我終於設法解決了這個問題。因爲菜單是顯示：無頁面加載時我不能得到li元素寬度的寬度。所以我不得不在懸停時進行初始化。這是我的jQuery：

var li_width = 0; 
$('#menu-topp-meny .parent-item').hover(function() { 
    $('ul', $(this)).each(function(){ 
     $('li', $(this)).each(function(){ 
      li_width += $(this).outerWidth(); 
     }); 
     $(this).css({'width': li_width + 'px', 'margin': '0px auto'}); 
     $('span', $(this)).css({'left': 50-li_width/2 + 'px', 'position': 'absolute', 'width': li_width + 'px'}); 
    li_width = 0; 
    }); 
});

來源

2012-03-29 20:58:44

那樣？

var ul_width = 0; 

$('#menu-topp-meny .parent-item').each(function(){ 
    $('#menu-topp-meny .parent-item ul').each(function(){ 
     var li_width = 0; 
     $(this).find('li').each(function(){ 
      li_width += $(this).width(); 
     }); 
     ul_width+= li_width; 
     $(this).css({'width': ul_width + 'px'}); 
     li_width = 0; 
     ul_width = 0; 
    }); 
});

請解釋多了，什麼你正在嘗試做的

來源

2012-03-29 01:03:42

我在底部添加了一個額外的解釋，這是否對您有幫助？ – 2012-03-29 01:27:07

謝謝你指出我正確的方向，我終於解決了它。在下面發佈了我的Jquery解決方案。 :) – 2012-03-29 21:00:07

這聽起來像一個佈局的問題，所以它很可能至少有一個基於CSS的解決方案。

但在沒有更多的信息，你需要深入到所有嵌套<ul>變量與遞歸函數（連同$.closest()相匹配的母公司），然後設置一個屬性上各<ul>標籤，以避免解析它兩次。

通過這種方式，您將能夠影響該頁面上的所有<ul> - <li>結構，而不必擔心它們的數量或它們嵌套的深度。

但是，再次，您可能會有一個基於CSS的修復程序。

來源

2012-03-29 01:15:44

jQuery通過多個ul標籤循環並根據li標籤設置獨特的寬度

回答

相關問題