1

使用 $.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;
 }))
4

3 回答 3

4

问题似乎与调用返回的对象类型有关$.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/

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

于 2012-08-16T09:00:38.670 回答
1

您可能误解了 map 的作用。

$.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 答案的主要区别在于您不需要多个循环。

于 2012-08-16T08:59:13.023 回答
0

您传递给的回调函数一次$.map只能返回一件事element，但是如果连续使用两个if语句，您可能会尝试创建两件事 - 但如果您确实创建了两个元素，则只有第二个元素最终出现element在你回来。

如果val.label和val.type都设置并且val.label应该优先，则将第二个更改if为else if.

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

于 2012-08-16T08:55:13.423 回答