ul li $（this）.text（）nothing

Question

已解決！實際上問題出在$（document）.ready（function（）{//}）;在我使用它之後，它工作得很好。感謝您的幫助，並因爲這樣愚蠢的錯誤而感到抱歉。

我想從引導下拉菜單中選擇li。它的工作原理，但是當我想要得到所選李的文本時，它什麼也沒有顯示。

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     <font id="dropdownMenu" >inch</font> 
     <span class="caret"></span> 
    </a> 
    <ul id="dropdownList" class="dropdown-menu"> 
     <li><a href="#">inch</a></li> 
     <li><a href="#">cm</a></li> 
     <li><a href="#">mm</a></li> 
    </ul> 
</div> 

JS：

$('#dropdownList li').click(function() { 
    console.log($(this).text()); 
    document.getElementById('dropdownMenu').innerHTML = $(this).text(); 
}); 

可我知道爲什麼它不工作？

謝謝！

Answer 1

獲取裏面的錨標記文本。這是包含文字的元素。

$('#dropdownList li').click(function() { 
    console.log($(this).find('a').text()); 
    document.getElementById('dropdownMenu').innerHTML = $(this).find('a').text(); 
}); 

Answer 2

使用jQuery：

JSFiddle

$('#dropdownList li').click(function() { 
    console.log($(this).text()); 
    $('#dropdownMenu').text($(this).text()); 
}); 

Answer 3

你應該儘量限制DOM讀/寫，就像使用.find()和.text()等。我會在標記中添加一些數據

HTML：

<ul id="dropdownList" class="dropdown-menu"> 
    <li data-value="inch"><a href="#">inch</a></li> 
    <li data-value="cm"><a href="#">cm</a></li> 
    <li data-value="mm"><a href="#">mm</a></li> 
</ul> 

個

JS：

$('#dropdownList li').click(function() { 
    console.log($(this).data('value')) 
}) 

Working Demo

兩件事情：

• 的data-*是，你可以用它來滿足您的需求有效的HTML5標記。
• 不要每次點擊重新讀取DOM var dropdownValue = $('#value')。