Question

使用$ .map函数我正在循环一个对象并附加我生成的元素。但是我的情况是，我正确地获得了控制台信息，但最后只返回了对象追加，我的代码中出现了什么问题？

我的代码：

  $('body').append(
 $.map(val.fields, function (val, i) {
     var element;
     if (val.label) {
         element = $('<label />', {
             text: val.label
         });
         console.log(element); //properly consoles 3 lables but not appending why?
     }
     if (val.type) {
         element = val.type === 'text' || val.type === 'submit' ? $('<input />', {
             type: val.type,
             name: val.name,
             value: val.value,
             id: val.vlaue
         }) : val.type === 'select' ? $('<select />', {
             name: val.name
         }) : '';
         console.log(element); // properly console 3 element and only this is appending
     }

     return element;
 }))

Answer 1

问题似乎与调用$.map返回的对象类型有关。

如果您将地图调用更改为return element[0]（创建的实际dom元素而不是包装的jQuery对象），那么它可以工作：

$('body').append(
     $.map(val.fields, function (val, i) {
         var element;
         if (val.label) {
             element = $('<label />', {
                 text: val.label
             });
             console.log(element); //properly consoles 3 lables but not appending why?
         }
         if (val.type) {
             element = val.type === 'text' || val.type === 'submit' ? $('<input />', {
                 type: val.type,
                 name: val.name,
                 value: val.value,
                 id: val.vlaue
             }) : val.type === 'select' ? $('<select />', {
                 name: val.name
             }) : '';
             console.log(element); // properly console 3 element and only this is appending
         }

         return element[0]; // <----- Added [0] here
     })
)

示例 - http://jsfiddle.net/nhds6/

这假设总会有一个元素。如果不是这种情况，您可能希望添加一些错误处理。

Answer 2

你可能误解了地图的作用。

$ .map（）方法将函数应用于数组或对象中的每个项目，并将结果映射到新数组中。

您可能需要考虑添加jQuery集合：

var collection = $();


$.map(val.fields, function (val,i) {
    var element;
    if(val.label){
        element = $('<label />',{text:val.label});
        collection.add(element);
    }
    if(val.type) {
        element =   val.type === 'text' || val.type === 'submit' ? $('<input />',{
            type:val.type,
            name:val.name,
            value:val.value,
            id:val.vlaue
        }) :
        val.type === 'select' ? $('<select />',{name:val.name}) : '';
        collection.add(element);
    }
});

$('body').append(collection);

user338128答案的主要区别在于您不需要多个循环。

Answer 3

您传递给$.map的回调函数一次只能返回一件事element，但是连续两行if语句可能会尝试创建两件事 - 但是如果你确实创建了两个元素，那么第二个元素最终会返回到你返回的element变量中。

如果同时设置val.label和val.type且优先val.label，则将第二个if更改为else if。

如果您需要同时创建两者，那么$.map可能不是最好的方法。

jquery - $ .map - 返回元素没有正确附加

3 个答案: