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基于字符串大小

回答

相关问题