Hot將html輸入屬性映射到jQuery對象？

Question

我想將所有頁面輸入ID和值 讀入對象，並將它傳遞給通過它們循環並提取id和值的函數。

我開始：

function send() 
{ 
var data = []; 
var inputs = $(":text"); 
for (var i = 0, l = inputs.length; i < l; i++) { 
    var input; 
    input.id = inputs[i].attr("id"); 
    input.text = inputs[i].val(); 
    data[i] = input; 
} 
receive(data); 
} 

function receive(data) 
{ 
    for (var input in data) { 
     alert(input.id); 
     alert(input.text);   
    } 
} 

爲什麼這不起作用？

Answer 1

要將項目添加到數組中，您可能希望使用.push()而不是通過數字索引訪問它。此外，jQuery提供了一個.each來遍歷一個集合。

var data = []; 
$(':input:not(:button)').each(function() { 
    data.push({ 
     id: this.id, 
     text: $(this).val() 
    }); 
}); 

還有一件事。 jQuery也包括.map函數，該函數返回「映射」在一個給定的可縮短上面的代碼到一個數組...

var data = $(':input:not(:button)').map(function() { 
    return { id: this.id, text: $(this).val() }; 
}); 

Answer 2

如果你給你的input元素name屬性，你可以只是做此...

var data = $(":text").serializeArray(); 

...，這導致在該數據結構（從docs截取）...

[ 
    { 
    name: "a", 
    value: "1" 
    }, 
    { 
    name: "b", 
    value: "2" 
    }, 
    { 
    name: "c", 
    value: "3" 
    }, 
    { 
    name: "d", 
    value: "4" 
    }, 
    { 
    name: "e", 
    value: "5" 
    } 
] 

Answer 3

使用jQuery的serializeArray功能

HTML：

<form id="test"> 
    <input type="hidden" name="a1" value="test" /> 
    <input type="text" name="a2" value="test2" /> 
    <input type="text" name="a3" value="test2" /> 
    <input type="text" name="a4" value="test2" /> 
</form> 

JS：

function getData(){ 
    var data = $("#test").serializeArray(); 
    for(var i in data){ 
     alert(data[i].name+":"+data[i].value); 
    } 
} 

的jsfiddle例如： http://jsfiddle.net/k2Dd4/

Answer 4

我不知道在jQuery的準確實施，但在Javascript中我會這樣做

var inputs = document.getElementsByTagName("input"); 
var textelems; 

for (var i=0;i<inputs.length;i++) { 
    if (inputs[i].type == "text") { 
     tempElem = []; 
     tempElem['id'] = inputs[i].id; 
     tempElem['value'] = inputs[i].value; 
     textelems.push(tempElem); 
    } 
} 

這會給你一個二維數組（tempElems），其中每個索引都是一個帶有自己的id和value索引的文本框。

Answer 5

正確的代碼看起來像：

function send() 
{ 
var data = []; 
var inputs = $(":text"); 
for (var i = 0, l = inputs.length; i < l; i++) { 
    var input = {}; 
    input.id = $("#" + inputs[i].id).attr("id"); 
    input.text = $("#" + inputs[i].id).val();    
    data[i] = input; 
} 
receive(data); 
} 

function receive(data) 
{ 
    for (var i = 0, l = data.length; i < l; i++) { 
     alert(data[i].id); 
     alert(data[i].text); 
    } 
}