如何使用 jQuery 每个函数获取每个元素的索引

Question

我正在制作一个菜单，为此我使用 jquery 来显示数据。

我想让它更有活力，为此我使用了 each() 函数

这是我的代码的一个代表性示例http://jsfiddle.net/4r5cLy00/

如您所见，单击会显示无序列表的所有列表项，这不是我想要的。我想获得点击 <li>

我希望有人对此有一个简单的解决方案吗？

Answer 1

你是这个意思吗？

$(document).ready(function() {
    $('ul > li').click(function() {
        alert($(this).text());
    });
});

http://jsfiddle.net/4r5cLy00/1/

Answer 2

这就是您在此实例中使用事件委托的方式。这是一个很好的做法，每个 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 每个函数获取每个元素的索引

How to get the index of each element using jQuery each function

jquery

events

each