使用 .map() 和 .get() 命名的数组键

Question

我需要将输入及其值输出到 div 中。但是，因为我需要将正确的标签与正确的输入相匹配，并且某些字段允许空值，所以我遇到了匹配问题。使用以下代码将每个标签/输入拉入一个数组，然后输出：

var inputArr = $('input, select').map(function(){
    return "<p>" + $(this).val() + "</p>";
}).get()

var labelArr = $('label').map(function(){
  return "<p>" + $(this).text() + "</p>";
}).get()

function setValuesForConfirm() {
//Clear Div Contents                
  $("#test-output-1, #test-output").html('');

  for (var i = 0; i < labelArr.length; i++) {
    $("#test-output-1").append(labelArr[i]);
  }

  for (var i = 0; i < inputArr.length; i++) {
    $("#test-output").append(inputArr[i]);
  }
}

因此，如果任何输入为空白，则字段与标签不匹配。

我的问题是，我可以像目前一样使用 .map() 函数将数组键命名为 JS 中的字段名称或 ID 吗？

JSFiddle Here

Answer 1

您可以使用输入创建一个对象：

var formObj={};

$('input, select').each(function(){
    formObj[this.name]={val: this.value, labelText: $(this).prev('label').text()}; 

});

那么当循环遍历对象时可以将html放在一起

$.each(formObj, function(key, item){
    var labelHtml='<p>'+item.labelText+'</p>';
    var inputHtml='<p>Name: '+ key+', value: '+item.val+'</p>';
    /* do something with html*/
})

Answer 2

虽然你所拥有的对我来说似乎工作正常，但.map 创建了一个数组，并且你只能在 JavaScript 的数组中拥有数字序号键，因此你需要一个对象。

var inputArr = {};
$('input, select').each(function(){
    inputArr[$(this).attr('name')] = "<p>" + $(this).val() + "</p>";
});

http://jsfiddle.net/Mz9Vy/1/