仅从指定的字段集中提取数据

Question

我在表单中有多个字段集，它们具有单独的输入/选择元素，以及以下JS / jQuery来处理保存时的元素。

var form = {};

$('fieldset').each(function() {
  var fieldsetId = this.id; var fieldset = {};
  $('#'+fieldsetId+' input:checkbox, #'+fieldsetId+' input:radio').each(function() {
    name = $(this).attr('name');
    fieldset[name] = $(this).val();
  });

  $('#'+fieldsetId+' select').each(function() {
    ...
  }

  form[fieldsetId] = fieldset;
});

正在读取数据。问题在于多个字段集。每个连续的字段集都会覆盖最后一个并使用所有先前的输入值。

目前，返回的已处理数据类似于：

first-fieldset (object)
  key:2
  textbox:"value"
  select:"value"
second-fieldset (object)
  key:2
  textbox:"value"
  select:"value"

它应该在哪里：

first-fieldset (object)
  key:1
  textbox:"value"
second-fieldset (object)
  key:2
  select:"value"

我非常怀疑它是在选择字段集元素的方式，但我尝试的所有内容都会产生相同的格式或根本没有数据。

Answer 1

似乎在http://jsfiddle.net/gaby/jdR3V/1/

工作正常

但是，如果您将var fieldset = {};置于.each()电话之外，则会失败。

---

此外，您可以对可读性和性能进行一些改进 （不使用$()来获取可直接访问的属性，并使用fieldset元素缓存对jquery对象的引用，并使用它来查找输入元素而不是多个动态选择器< / em>的）

var form = {};
$('fieldset').each(function() {
  var self = $(this),
      fieldset = {};

  self.find('input:checkbox, input:radio').each(function() {
    fieldset[this.name] = this.value;
  });

  self.find('select').each(function() {
    ...
  }

  form[this.id] = fieldset;
});