Question

我的代码如下所示。第一个警报显示“test li 0”，宽度为1024.但1024宽度不正确。实际上它大概是50像素。我想要文本的宽度“test li 0”。我怎样才能获得文字宽度？

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

$('#menutop > span> li').each(function(index) {

//var tesi = jQuery("#i_"+i).css('width');
var tesi = jQuery("#i_"+i).width();
alert(tesi + ':' + $(this).text());
total = parseInt(total) + parseInt(tesi);
i=parseInt(i)+1;

});
alert(total);
});

<ul id="menutop">
    <span><li id="i_0" style="background-color:blue;"> test li 0 </li></span>
    <span><li id="i_1" style="background-color:blue; width:150px;"> test li 1 </li></span>
    <span><li id="i_2" style="background-color:blue; width:200px;"> test li 2 </li></span>
</ul>

Answer 1

正如 Pekka 建议的那样，你可以将span放在li里面并使用下面的算法：

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

$('#menutop > li').each(function(index) {

//var tesi = jQuery("#i_"+i).css('width');
var tesi = $(document.getElementById("i_"+i).firstChild).width();
alert(tesi + ':' + $(this).text());
total = parseInt(total) + parseInt(tesi);
i=parseInt(i)+1;

});
alert(total);
});

<ul id="menutop">
    <li id="i_0" style="background-color:blue;"><span> test li 0 </span></li>
    <li id="i_1" style="background-color:blue; width:150px;"><span> test li 1 </span></li>
    <li id="i_2" style="background-color:blue; width:200px;"><span> test li 2 </span></li>
</ul>

Answer 2

为了达到您想要的效果，我认为您应该将span放入li s：

<ul id="menutop">
    <li id="i_0" style="background-color:blue;"><span> test li 0 </span></li>
    <li id="i_1" style="background-color:blue; width:150px;"><span> test li 1 </span></li>
    <li id="i_2" style="background-color:blue; width:200px;"><span> test li 2 </span></li>
</ul>

这样做：

...
$('#menutop > li > span').each(function(index) {   //Note the order
   var tesi = jQuery("#i_"+i+" span").width();  //Get span width instead of li's
   //... the same code

那是因为li会默认占用所有宽度（这就是为什么你得到1024），但跨度不会，只占用它们的内容宽度。

希望这会有所帮助。干杯

Answer 3

只需更改一下代码即可。

var tesi = jQuery("#i_"+i).width();

到

var tesi = jQuery("#i_"+i).css("display", "inline").width();
jQuery("#i_"+i).css("display", "block");

暂时将当前<li>转换为内联，计算宽度，然后将其转换回块。

我想使用jquery找到“li”的总宽度。我怎样才能获得文字宽度？我该怎么做？

3 个答案: