将输入元素对转换为 json答案

【问题标题】：Converting pairs of input elements into json将输入元素对转换为 json
【发布时间】：2011-09-08 03:25:39
【问题描述】：

我有一个简单的用户界面，上面有一个“添加项目”的链接。单击此按钮时，其下方会出现一对输入框。如果再次单击它，则会出现另一对。我正在尝试考虑生成这些元素并将其转换为某种 json 键值对数组的最佳方法（每对中的第一个输入元素是键，第二个输入元素是值）。

现在我只有一个计数器，并使用它生成 id，例如（在“添加项目”链接的点击事件中）：

$('#features').append('<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" /><a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input id="feature-description-' + self.featureCount + '" type="text" name="asdf" />');

我不知道使用什么作为“名称”属性，以便轻松地从它们创建一个 json 数组。

【问题讨论】：

为什么不能使用与 id 属性相同的值？

标签： javascript jquery ajax arrays json

【解决方案1】：

你可以在不使用 id 属性的情况下做这样的事情。

$('#features').append('<div><input type="text" />
<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input    type="text" /></div>');

还有你的 javascript，

var yourArray=[];
$('#yourButton').click(function(){
   $('#features div').each(function(){
      var div=$(this);
      var k=$('input:first',div).val();
      var v=$('input:first',div).next().val();

        yourArray.push({key:k, value: v});

   });

});

【讨论】：

【解决方案2】：

名称属性使用什么并不重要，只要名称和描述names 不同即可。假设这些元素都附加到 id 为 myform 的表单中。给每一对它自己的包装对象。在这里，我使用了div，但fieldset 也同样适用。

$('#features').append(
    '<div class="feature-div">
    '<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" />' +
    '<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a>' +
    '<input id="featurena-description-' + self.featureCount + '" type="text" name="asdf" />' +
    '</div>');

现在，可以合理地提取每一对：

var myarray = [];
$('#myform .feature-div').each(function(i, v) {
    myarray.push([
        $('input[name=name]', v).val(), $('input[name=description]', v).val()]);
});

或者您希望显示的数据。

【讨论】：