如何在jquery中获得嵌套的ul li文本
如何在jquery中获得嵌套的ul li文本
提问于 2018-02-22 12:31:31
如何在jquery中的onclick中以嵌套的ul li文本获取文本我的代码如下所示，
当我点击li时，我需要得到当前的li文本，
$('.selectRow li').on('click', function() {
var textSelected = $(this).text();
console.log(textSelected)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="selectRow">
<li>test-1</li>
<li>test-2</li>
<li>test-3
<ul>
<li>test-3.1</li>
<li>test-3.2</li>
<li>test-3.3</li>
<li>test-3.4</li>
</ul>
</li>
<li>test-4</li>
<li>test-5</li>
<li>test-6
<ul>
<li>test-6.1</li>
<li>test-6.2</li>
<li>test-6.3</li>
<li>test-6.4</li>
</ul>
</li>
</ul>
我得到当前的li文本点击，但是如果li单击子菜单li，我将得到所有父li文本和子菜单li文本。有人能告诉我这件事的解决方案吗。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-22 12:51:24
由于您没有得到我为您找到的解决方案，所以我为您提供了以下示例：
$('.selectRow li').on('click', function(e) {
if (e.target == e.currentTarget) {
var textSelected = $(this)
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text()
.trim();
console.log(textSelected);
}
})这将只返回单击的li的文本。
Demo
$('.selectRow li').on('click', function(e) {
if (e.target == e.currentTarget) {
var textSelected = $(this)
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text()
.trim();
console.log(textSelected);
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="selectRow">
<li>test-1</li>
<li>test-2</li>
<li>test-3
<ul>
<li>test-3.1</li>
<li>test-3.2</li>
<li>test-3.3</li>
<li>test-3.4</li>
</ul>
</li>
<li>test-4</li>
<li>test-5</li>
<li>test-6
<ul>
<li>test-6.1</li>
<li>test-6.2</li>
<li>test-6.3</li>
<li>test-6.4</li>
</ul>
</li>
</ul>
Stack Overflow用户
发布于 2018-02-22 12:55:15
在这里，您可以使用事件对象的stopPropagation方法：
$(document).on('click', '.selectRow li', function(e){
e.stopPropagation();
console.log('li element is clicked');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="selectRow">
<li>test-1</li>
<li>test-2</li>
<li>test-3
<ul>
<li>test-3.1</li>
<li>test-3.2</li>
<li>test-3.3</li>
<li>test-3.4</li>
</ul>
</li>
<li>test-4</li>
<li>test-5</li>
<li>test-6
<ul>
<li>test-6.1</li>
<li>test-6.2</li>
<li>test-6.3</li>
<li>test-6.4</li>
</ul>
</li>
</ul>
你也可以在这里找到答案，Why ul gets triggered when I click on li?
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48927489
复制相关文章
相似问题
腾讯云开发者
