如何获取动态创建元素的索引（列表项）？

Question

<ul class="siteName"></ul>

在上面的un order list中，我将<li></li>附加到某个n（10）项。

点击<li>如何获取索引获取li的索引？

Answer 1

尝试使用element.index()来获取相对于其兄弟姐妹的索引，

$('.siteName').on('click','.siteName > li',function(){
  console.log($(this).index()); //index of the clicked li, index starts from 0
});

如果您不想排除嵌套的li元素的点击，请使用

$('.siteName').on('click','li',function(){
  console.log($(this).index()); //index of the clicked li, index starts from 0
});

Answer 2

根据您的评论，很明显您的li内有子标记，因此点击事件也会为其生成。所以你应该把代码写成，

$('.siteName').on('click', 'li', function(e){
        alert($(this).closest("li").index());

    });

Demo

Answer 3

$('ul.siteName').on('click', 'li', function(e){
var index=$(this).index();
}

Answer 4

请尝试以下代码：

$('.siteName').on('click', 'li', function(e){
        var index=$(this).index();
        alert(index);
    });

Demo

更新

点击事件应位于li而不是a。查看代码中的更改并与您的代码进行比较。

更新代码：

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

Another Demo