使用class属性获取自动生成的元素的索引

Getting the index of auto generated elements using class attribute

本文关键字：元素 索引 自动生成 获取 class 属性 使用      更新时间：2023-09-26

我正在跟踪此线程的aM1Ne答案（投票最多的一个）以进行绑定事件，因为我正在动态生成多个元素
我的js代码看起来像

$(document).on('click', ".myCheckBox" , function() {
    //.....
});

这里myCheckBox是分配给所有生成复选框的类。现在我想要点击复选框的索引。我试过

alert($(this).index());

内部。但它总是显示0。有没有办法获得包含myCheckBox类的点击复选框的索引？

在HTML中，我有一个复选框

<input type="checkbox" name="" class="myCheckBox" >

在一个按钮上点击

$("#clickAdd").click(function()
{
    ("#myDiv").append("<input type='"checkbox'"  class='"myCheckBox'" >");
 });

我不知道真正的解释，但这段代码的工作原理就像魅力

$(document).on('click', ".myCheckBox" , function() {
     var checkIndex = $(this).closest('.myCheckBox').index('.myCheckBox');
     alert(checkIndex);
});

如果您能够在生成复选框时分配值，我会采取稍微不同的方法，例如：

$(cb).data('indexVal', index++);

您可以使用数据方法指定任意对象/信息。然后，您可以在点击事件处理程序中轻松检索它：

alert($(this).data('indexVal'));

它可以直接从元素中读取，而不用担心它在页面中的位置。

使用您添加的HTML/脚本，我会这样做：

var indexVal = 1;
$("#clickAdd").click(function() {
    var inp = $('<input>', {type : 'checkbox' });
    inp.addClass('myCheckBox');
    inp.data('indexVal', indexVal++);
    ("#myDiv").append(inp);
});
相关文章：