jqueryを使って "li"の幅を探したい。どのようにテキストの幅を取得できますか？どうすればいいですか？

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

として、あなたは、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の中に入れてください：

<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> 

そして、次の操作を行います。

のみ、その内容は幅占有し、李さんは、（あなたが1024を得た理由です）、デフォルトですべての幅を占有しようとしますが、スパンがないためだ

... 
$('#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 

。

これが役に立ちます。乾杯。

Answer 3

コードを少し変更してください。

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

に

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

それは一時的にインラインに電流<li>変換する幅を算出し、再びブロックに変換します。