如何使用 jQuery 每个函数获取每个元素的索引
How to get the index of each element using jQuery each function
我正在制作一个菜单,为此我使用 jquery 来显示数据。
我想让它更有活力,为此我使用了 each()
函数
这是我的代码的一个代表性示例http://jsfiddle.net/4r5cLy00/
如您所见,单击会显示无序列表的所有列表项,这不是我想要的。我想获得点击 <li>
我希望有人对此有一个简单的解决方案吗?
你是这个意思吗?
$(document).ready(function() {
$('ul > li').click(function() {
alert($(this).text());
});
});
这就是您在此实例中使用事件委托的方式。这是一个很好的做法,每个 JS 程序员都应该使用它。优点是你只绑定一个事件,你会得到更好的性能。在这里阅读更多内容:
http://bdadam.com/blog/plain-javascript-event-delegation.html
$('ul').click(function(event) {
if (event.target.tagName == 'LI') {
console.log(event.target.innerText);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
我正在制作一个菜单,为此我使用 jquery 来显示数据。
我想让它更有活力,为此我使用了 each()
函数
这是我的代码的一个代表性示例http://jsfiddle.net/4r5cLy00/
如您所见,单击会显示无序列表的所有列表项,这不是我想要的。我想获得点击 <li>
我希望有人对此有一个简单的解决方案吗?
你是这个意思吗?
$(document).ready(function() {
$('ul > li').click(function() {
alert($(this).text());
});
});
这就是您在此实例中使用事件委托的方式。这是一个很好的做法,每个 JS 程序员都应该使用它。优点是你只绑定一个事件,你会得到更好的性能。在这里阅读更多内容:
http://bdadam.com/blog/plain-javascript-event-delegation.html
$('ul').click(function(event) {
if (event.target.tagName == 'LI') {
console.log(event.target.innerText);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>