jquery를 사용하여 "li"의 너비를 찾고 싶습니다. 어떻게하면 텍스트 너비를 얻을 수 있습니까? 내가 어떻게 해?

Question

내 코드는 다음과 같습니다. 첫 번째 경고는 "test li 0"과 너비의 1024를 표시합니다. 그러나 1024 너비가 올바르지 않습니다. 실제로 그것은 약 50px입니다. 텍스트 "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

, 당신은 리튬 안에 범위를 넣고 아래의 알고리즘을 사용할 수 있습니다 : 당신이 원하는 결과를 달성하기 위해

$(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).width(); 

이 일시적 인라인 현재 <li> 변환

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

에 폭을 산출 한 후 다시 블록으로 변환한다.