Question

我需要能够识别单击哪个动态添加的复选框（通过索引或名称或其他）。这是我在类似问题上发现的小提琴：JSFiddle

我希望它显示为＆＃34;这是第3个复选框＆＃34;而不只是＆＃34;点击＆＃34;。这甚至可能吗？

我已经尝试$(this).index()，但没有运气。

Answer 1

首先，您可以使用index()来获取匹配集中当前元素的索引。从那里你可以使用辅助函数来格式化要显示的序号。试试这个：

$(document).on('change', '[type=checkbox]', function (e) {
    alert('This is the ' + getOrdinal($(this).index('[type=checkbox]') + 1) + ' checkbox');
});

function getOrdinal(n) {
    var s = ["th", "st", "nd", "rd"],
        v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
}

Example fiddle

Answer 2

嗯，罗里加快了速度。这是我的fiddle：）

HTML

<button id="append">Append</button>
<div class="wrapper"></div>
<span></span>

JS

var checkbox = $('<input/>', {type : 'checkbox'});

$('#append').click(function(){
    $('.wrapper').append(checkbox.clone()).append('checkbox');
});

$(document).on('change', 'input[type=checkbox]', function(){
    $('span').text('Index: ' + $(this).index());
});

Answer 3

你在这里：

var checkbox = '<label><input type="checkbox" />Checkbox</label>';
$(document).on('click', '.add', function () {
    $('#group').append(checkbox);
    $('[type=checkbox]').checkboxradio().trigger('create');
    $('#group').controlgroup().trigger('create');
});
var symbols = {
    1: 'st',
    2: 'nd',
    3: 'rd',
    4: 'th'
};
$(document).on('change', '[type=checkbox]', function (e) {
    var index = $('[type=checkbox]').index($(this)) + 1;
    var symbol = index >= 4 ? symbols[4] : symbols[index];
    var str = 'This is the ' + index + symbol + ' checkbox';
    alert(str);
});

希望得到这个帮助。

查找动态添加元素的索引

3 个答案: