每个内的 jQuery 变量范围答案

【问题标题】：jQuery variable scope within each每个内的 jQuery 变量范围
【发布时间】：2011-08-26 20:54:57
【问题描述】：

我正在尝试构建一个包含每个表单元素的所有值的数组。刚刚发现警报有效，但在 console.log 上数据为空，我是否无法理解 javascript 中的作用域是如何工作的？

  var data = new Array();
  $("#page2 input").each(function(index) {
      alert($(this).attr('id'));
      data[$(this).attr('id')] = $(this).val();
  });

非常感谢您的宝贵时间，

【问题讨论】：

编写效率更高：this.id 和 this.value。

标签： javascript jquery foreach scope each

【解决方案1】：

您正在尝试创建一个对象（new Object() 或{ }），而不是数组。

【讨论】：

【解决方案2】：

要知道的一点是，JavaScript 中的 Array 只能有正整数索引（实际上被视为字符串）。

当您将字符串分配给键时，您将属性分配给Object。

你可能想要这样的东西......

var data = {};
$("#page2 input").each(function() {
   data[this.id] = this.value;
});

jsFiddle.

如果您只想要 id 属性。

var data = $("#page2 input").map(function() { 
               return this.id;
           }).get();

jsFiddle.

【讨论】：

谢谢，尤其是第二部分，看起来很有趣！我必须同时停止编程两种语言（PHP/Javascript），导致这种混乱！

【解决方案3】：

如果您使用输入 id 作为键，那么您创建的是一个对象，而不是一个数组。

var data = new Object();

【讨论】：

【解决方案4】：

范围是正确的。如果控制台没有在数组中显示整数，那么我猜你的 ID 属性不是数字。

并不意味着数据不存在。只是意味着控制台选择只显示数字索引。

考虑到 Chrome 控制台的以下输入：

var arr = new Array();
arr['test'] = 'test';

arr;  // []
arr.test;  // 'test'

虽然将非数字属性赋予数组是有效的 JavaScript，但在大多数情况下这是错误的方法。

【讨论】：

【解决方案5】：

你的问题是：

...每个表单元素的所有值...

但您的选择器仅适用于一种特定形式的输入元素。假设您实际上想要一个表单中所有控件的值，那么以下 POJS 可能适合：

function getFormValues(formId) {
  var data = {};
  var form = document.getElementById(formId);

  if (form) {
    var control, controls = form.elements;

    if (controls) {
      var i = controls.length;

      while (i--) {
        control = controls[i];
        data[control.id] = control.value;
      }
    }
  } 
  return data;
}

假设每个控件都有一个 ID，这不是必需的。如果某些控件没有 id，您可能希望使用 name 属性，所以：

        data[control.id || control.name] = control.value;

在某些情况下，您的控件可能没有 id 或名称（例如，表单需要但不提交其值的控件，例如提交和重置按钮），因此：

        var idOrName = control.id || control.name;
        if (idOrName) {
          data[idOrName] = control.value;
        }

您可能还需要处理具有相同名称的控件，因为最后访问的控件的值将替换之前的同名控件的值。

【讨论】：