jQuery根据字符串大小调整大小 [英] jquery resize li based on a string size

问题描述

我有一些查询，可以计算每个li的像素宽度. 问题是它没有考虑A href中的字符数.

您可能会看到"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/

如您所见，当鼠标悬停时，项目已损坏.

反正有办法解决这个问题吗?

解决方案

请参见 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];  
}

然后我们的ul为960px，必须至少包含total px.

然后，可用空间为$('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);

我们将其四舍五入到小数点后两位

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

最后，我们为每个li分配其当前值(不带边框，填充和边距)以及其额外宽度:

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

I have some query which will calculate the pixel width for each li. problem is it doesnt take into consideration the amount of characters in an A href.

You might get "Cartouches/Réservoirs" and it will attempt to assign 124px width based on the calculation of the other items.

I need to check first if the number of characters will fit in the assigned size, if they dont then increase the size by remove some from an LI that has sufficient space.

$('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);
}); 

Here is the demo: http://jsfiddle.net/zwqYf/3/

As you can see when you hover the items are broken.

Is there anyway to get round this?

解决方案

See http://jsfiddle.net/zwqYf/10/:

We get li elements.

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

We store each li's width (including borders, paddings and margins).

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

We sum them into total

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

Then we have an ul of 960px which must contain at least total px.

Then, the available space is $('div#new-menu-lower ul').width()-total.

So each li can have an extra width of ($('div#new-menu-lower ul').width()-total)/(els.length).

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

We round it to 2 decimals

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

Finally we assign to each li its current with (without borders, paddings and margins) plus its extra width:

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

这篇关于jQuery根据字符串大小调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！