提取多个input的name属性存入数组遇问题：点击按钮后数组仍为空

嘿，我一眼就看到你代码里的两个关键问题，导致点击按钮后数组是空的：

1. DOM元素还没加载就执行了选择器 #

你的脚本写在HTML结构的前面，当浏览器执行var inputs = $("input[type='text']")这行代码时，页面上的文本输入框还没被渲染出来呢！这时候inputs其实是一个空的jQuery集合，循环自然不会往数组里推任何东西。

2. 循环里错误地引用了整个input集合 #

就算解决了DOM加载的问题，你在each循环里用inputs.attr("name")也不对——这个写法只会获取第一个input元素的name属性，而不是当前遍历到的那个input的属性。应该用$(this)来指向循环中的当前元素。

修正后的代码方案 #

方案一：用DOM就绪回调包裹代码 #

把你的jQuery代码放在$(document).ready()里，确保页面所有元素加载完成后再执行选择器：

$(document).ready(function() {
  var inputs = $("input[type='text']"), outputs = [];
  
  $("#submit").click(function() {
    outputs = []; // 每次点击清空数组，避免重复添加之前的内容
    inputs.each(function() {
      outputs.push($(this).attr("name"));
    });
    console.log(outputs); // 现在会输出 ["forename", "middlename", "lastname"]
  });
});

方案二：把脚本移到HTML末尾 #

直接把<script>标签放在</body>标签之前，这样DOM已经完全加载，不需要额外的就绪回调：

<div>
  <label for="Forename"> Forename </label>
  <input type="text" id="Forename" name="forename">
</div>
<div>
  <label for="Middlename"> Middle Names </label>
  <input type="text" id="Middlename" name="middlename">
</div>
<div>
  <label for="Lastname"> Lastname </label>
  <input type="text" id="Lastname" name="lastname">
</div>
<p id="message"></p>
<input type="button" id="submit" value="submit">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var inputs = $("input[type='text']"), outputs = [];

$("#submit").click(function() {
  outputs = [];
  inputs.each(function() {
    outputs.push($(this).attr("name"));
  });
  console.log(outputs);
});
</script>

更简洁的写法：用jQuery的map方法 #

你还可以用map方法直接提取name属性，省去手动循环的步骤，代码更简洁：

$(document).ready(function() {
  $("#submit").click(function() {
    var outputs = $("input[type='text']").map(function() {
      return $(this).attr("name");
    }).get(); // 把jQuery对象转换成普通数组
    console.log(outputs);
  });
});

这样每次点击都会重新获取当前页面上的文本输入框的name属性，就算后续动态添加了input也能正确提取。

内容的提问来源于stack exchange，提问作者one-hand-octopus