jquery resize li基於字符串大小

我有一些查詢將計算每個li的像素寬度。問題是它沒有考慮到A href中的字符數量。jquery resize li基於字符串大小

您可能會得到「Cartouches /Réservoirs」，它會嘗試根據其他項目的計算分配124px寬度。

我需要首先檢查字符數是否符合指定的大小，如果它們不通過從具有足夠空間的LI中刪除一些來增加大小。

$('div#new-menu-lower ul li').css('width', ($('div#new-menu-lower ul').width()/$('div#new-menu-lower ul li').length)); 
    $(function() { 
     var menuWidth = $('div#new-menu-lower ul').width(); 
     var listItems = $('div#new-menu-lower > ul > li').length; 
     var itemWidth = Math.floor(menuWidth * (1/listItems)) - 20; 

    $('div#new-menu-lower ul li').css('width', itemWidth); 
});

以下是演示：http://jsfiddle.net/zwqYf/3/

當你將鼠標懸停的項目被打破，你可以看到。

有沒有辦法解決這個問題？

來源

2012-08-13 SOLDIER-OF-FORTUNE

是什麼你試圖完成，爲什麼這樣？ – Rodik 2012-08-13 15:55:34

，因爲css方法將li聚集在一起，我需要它全寬。 – 2012-08-13 15:57:02

見http://jsfiddle.net/zwqYf/10/：

我們得到li元素。

var els=$('div#new-menu-lower ul li');

我們存儲每個li的寬度（包括邊框，填充和邊距）。

elsWidth=new Array(); 
for(var i=0;i<els.length;i++){ 
elsWidth[i]=$(els[i]).outerWidth(true); 
}

我們總結他們到total

var total=0; 
for(var i=0;i<elsWidth.length;i++){ 
total+=elsWidth[i]; 
}

然後我們有960px必須包含至少total PX的ul。

然後，可用空間是$('div#new-menu-lower ul').width()-total。

因此，每個li可以有一個額外的寬度($('div#new-menu-lower ul').width()-total)/(els.length)。

var availWidthForEl=($('div#new-menu-lower ul').width()-total)/(els.length);

我們把它四捨五入到2位小數

availWidthForEl=Math.floor(availWidthForEl*100)/100;

最後，我們分配給每個li其當前（無國界，填充和利潤），加上其額外的寬度：

for(var i=0;i<els.length;i++){ 
$(els[i]).css('width', $(els[i]).width()+availWidthForEl); 
}

來源

2012-08-13 16:48:24 Oriol

哦哇...我可以在代碼中留下一些評論，所以我知道最新怎麼回事？小菜一碟！對不起 – 2012-08-13 18:15:37

你的傳奇！非常感謝你！學習和解決方案！ – 2012-08-13 18:44:35

我可以看到你正在嘗試做什麼，但有很多方法可以更容易地做你所需要的，甚至不需要javascript/jquery。

考慮一下：

http://jsfiddle.net/zwqYf/4/

去除內嵌寬度樣式。
改變位置：相對與頂：3行高
改變李時珍填充爲「unbunching」

如果你需要讓他們更加分開，改變對李的填充。

如果您需要更改按鈕的高度，請不要忘記更改a的行高。

編輯：

http://jsfiddle.net/zwqYf/5/ - 更新，去除一些多餘的CSS，李娜的更大之間進行填充。

來源

2012-08-13 15:59:21 Rodik

這就是說我的意思是，但李的需要延伸到UL的全寬。當你懸停在最後一個禮拜時，不應該有UL展示的任何背景。 – 2012-08-13 16:16:48

你是什麼意思拉伸到全寬？你想讓按鈕佔用菜單的整個寬度？ – 2012-08-13 16:20:13

幾乎就好像我需要某種'min-padding-right'這就是CSS3的權利？ – 2012-08-13 16:20:55

jquery resize li基於字符串大小

回答

相關問題