jquery - $ .map - 返回元素沒有正確添加

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]（創建而不是被包裝的jQuery對象的實際的DOM元素），那麼它的工作原理：

$('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可以在同一時間，element返回的只有一件事，但在一排你的兩個if語句你可能嘗試創建兩件事情的回調函數 - 但是如果您確實創建了兩個元素，則只有第二個元素以您返回的element變量結束。

如果val.label和val.type均設置和val.label應優先考慮再更改第二if到else if。

如果您需要同時創建兩個，那麼$.map可能不是最好的方法。

Answer 3

您可能誤解了地圖的作用。

$ .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的答案是，你並不需要多個循環。