我有这样的代码:
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});input {
padding: 5px;
border: 3px solid #999;
border-radius: 8px;
margin-bottom: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button id="addScnt" style='margin-bottom: 15px;'>Add (limit 5)</button>
<div id="p_scents">
<p>
<label for="p_scnts"><input type="text" id="p_scnt" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
</p>
</div>我希望将新输入的创建限制为5个，并在它们生成时 for each 输入创建一个唯一的ID，如下所示:
#myid1
#myid2
#myid3
#myid4
#myid5
这只是一个可重现的例子，我需要为我的真实 case 更多的领域.
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function() {
if (i <= 4) { // 5 inputs limit
$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" class="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
}
return false;
});
$(document).on('click', '.remScnt', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
但其他方法都不管用.如何限制创建的条目数量并 for each 条目分配唯一的ID？