Jquery问题输入读取值问题

Question

当我用jquery创建新的输入时，我有jquery获取输入数据的问题

我需要得到值从ID: 2，但我得到测试1约翰和从ID 2测试2未定义

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputs">
<div class="names" id="1"><input type="text" id="Name"></div>
</div>
</br>
</br>
<a onclick="AnotherInput();">[+] Input</a>
<button onclick="send();">Send</button>
<div class="data">
</div>

<script>
var inputs = 1;
function AnotherInput() {
inputs++;
$('#inputs').append('<div class="input" id="' + inputs + '"><input type="text" id="Name"></div>');
}

function send() {
var max = 0;
$('.names').each(function() {
max = Math.max(this.id, max);
});

for (var i = 1; i <= max; i++) {
$('div#names').each(function() {
$(".data").append(" test " + i + " " + $(this).find('div#' + i).find('select[id="Name"]').val());
});
}
}
</script>

Answer 1

• 不要在重复的元素中使用id。
• 不要使用内联的JSon*处理程序属性。同样，你希望不要使用内联CSSstyle属性。
要获得当前元素的计数，您可以使用.children().length

const
$inputs = $("#inputs"),
$add = $("#add"),
$send = $("#send"),
$data = $("#data");
function add() {
const n = $inputs.children().length + 1;
$inputs.append(`<div><input type="text" name="name_${n}"></div>`);
}
function send() {
const data = $inputs.find('[name^="name_"]').get().map(el => el.value);
$data.append(data.join("<br>"));
}
$add.on("click", add);
$send.on("click", send);
add(); // Init! (Add the first input)

<div id="inputs"></div>
<button type="button" id="add">+ Add</button>
<button type="button" id="send">&rarr; Send</button>
<div id="data"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>