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')。