为每个元素提供唯一的ID

时间:2013-07-11 11:56:48

标签: javascript jquery

我一直在查看帖子,但似乎无法解决如何给每个元素一个唯一ID的最后一个问题,例如childsAge1,childsAge2等

for (var u = 0; u < 16; u++) ;

            var container = $('<div />');
            for (var i = 1; i <= num; i++) {
                container.append('<div>\n' +
                    '<select name="childsAge">    \n' +
                    '<option value="0">Less than 1</option>\n' +
                    '<option value="1">1</option>\n' +
                    '<option value="2">2</option>\n' +
                    '<option value="3">3</option>\n' +
                    '<option value="4">4</option>\n' +
                    '<option value="5">5</option>\n' +
                    '<option value="6">6</option>\n' +
                    '<option value="7">7</option>\n' +
                    '<option value="8">8</option>\n' +
                    '<option value="9">9</option>\n' +
                    '<option value="10">10</option>\n' +
                    '<option value="11">11</option>\n' +
                    '<option value="12">12</option>\n' +
                    '<option value="13">13</option>\n' +
                    '<option value="14">14</option>\n' +
                    '<option value="15">15</option>\n' +
                    '<option value="16">16</option>\n' +
                    '<option value="17">17</option>\n' +
                    '</select>\n' +
                    '</div>');
            }
            $('#dvChildren').html(container);

正如您所看到的,我可以根据

的值创建我需要的下拉列表数量
$('#SelectedChildrenValue').change(function() {
            var num = parseInt($(this).val(), 10);

但我似乎无法弄清楚如何添加唯一ID,我尝试过的所有内容都无法正常工作,查看其他帖子并尝试他们的示例也无法正常工作。我错过了一些简单的事情。

任何帮助将不胜感激


解决了问题,我应该使用<select name="childsAge' +i+ '">

2 个答案:

答案 0 :(得分:6)

尝试

for (var i = 1; i <= num; i++) {
            container.append('<div>\n' +
                '<select name="childsAge" id="childsAge'+i+'">    \n' +

答案 1 :(得分:1)

在设置dvChildren html内容并在for循环之外尝试此操作:

var $select = $("#dvChildren select");
$select.attr('id', function (index) {
    return 'childsAge' + (index + 1);
});

有关详细信息,请参阅此blog post