javascript - 动态创建列表 Javascript 的索引

Question

我有一个动态创建的列表，其中包含 json 数据。所以我的问题是如何获取点击项目的索引。

我试过这个：

$("li").click(function() {
       var index = $("li").index(this);
       alert(index); });

但这没有用。我没有收到警报？如果我创建一些静态 Li 元素，我会得到它们的索引。

请帮我 ：/

Answer 1

动态创建的列表将需要委托事件...

$("ul").on("click", "li", function() {
       var index = $(this).index();
       alert(index);
});

如果<ul>也是动态创建的，请选择创建列表之前存在的父节点。

Answer 2

两个问题：

1. 你只想$(this).index()：

   $("li").click(function() {
      var index = $(this).index();
      alert(index); });
   

   从文档中：

   如果没有参数传递给该.index()方法，则返回值是一个整数，指示 jQuery 对象中的第一个元素相对于其兄弟元素的位置。

2. 当您这样做时，它会将它与当时$("li").click(...)存在的元素联系起来。您稍后添加的那些将不会获得分配给它们的点击处理程序。处理这样的动态列表的最佳方法通常是事件委托。DevlshOne在他/她的回答中为您提供了一个示例。基本思想是这样的：

   $("selector for the list, not the list items").on("click", "li", function() {
       // handler code here
   });
   

   这会钩click在list上，而不是列表项上，但是会在单击发生时触发处理程序，就好像您已经钩住了处理程序上的单击一样。

Answer 3

试试下面的。假设ul没有动态加载。

$("ul.containerclass").on("click", "li", function() 
{
   var index = $(this).index();
   alert(index);
});

或者

$(document).on("click", ".containerclass li", function() {
   var index = $(this).index();
   alert(index);
});

注意：这里的 containerclass 可以是 ID

Answer 4

这是

$("li").click(function() {
       var index = $(this).index();
       alert(index);
});