如何基於每行兩個輸入字段創建一個JavaScript JSON（？）對象，其中包含48行？從輸入創建JSON
我有這樣的：
<div><input name = "name" /></div> <div><input name = "rating" /></div>
<div><input name = "name" /></div> <div><input name = "rating" /></div>
<div><input name = "name" /></div> <div><input name = "rating" /></div>
...
...
我再要作爲排序依據等級（遞減）的對象。這可以做到嗎？
你可以試試我的方法：
formObj2Json()函數將表單數據轉換爲json，每個項的鍵都是輸入的唯一名稱。$(function(){
$(document).on('click', '#grap', function(){
var formData = $('#anph').serializeArray(),
rs = formObj2Json(formData);
$('#rs').html(JSON.stringify(rs, undefined, 2));
});
})
function formObj2Json(formArray) { //serialize data function
var returnArray = {};
for (var i = 0, len = formArray.length; i < len; i++)
returnArray[formArray[i].name] = formArray[i].value;
return returnArray;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Knockout 1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="grap">grap</button>
<form id="anph">
<div class="group"><input name="name1" /><input name="rating1" /></div>
<div class="group"><input name="name2" /><input name="rating2" /></div>
<div class="group"><input name="name3" /><input name="rating3" /></div>
<div class="group"><input name="name4" /><input name="rating4" /></div>
<div class="group"><input name="name5" /><input name="rating5" /></div>
<div class="group"><input name="name6" /><input name="rating6" /></div>
<div class="group"><input name="name7" /><input name="rating7" /></div>
<div class="group"><input name="name8" /><input name="rating8" /></div>
<div class="group"><input name="name9" /><input name="rating9" /></div>
<div class="group"><input name="name10" /><input name="rating10" /></div>
</form>
<pre id="rs"></pre>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</body>
</html><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var players = [{ name: "Paul", rank: 1}, {name: "Michael", rank: 2}];
$.each(players, function(key, value){
$("#containerofPlayers").append('<div id="' + value.name + '">' + value.name + ' is ranked ' + value.rank + '</div>');
});
});
</script>
發生了什麼事是你有一個數組對象的。循環訪問數組中的每個對象以獲取其數據。然後創建並附加一個新的div，其值爲<div id="containerofPlayers"></div>元素。
希望這會有所幫助。
編輯：如果你不想創建jQuery中的<div>元素，但只要將文字，你可以這樣做，而不是：
$('#'+value.name).text(value.name + " is ranked " + value.rank);
既然你已經改變了您的原始問題，
<div><input name="name" /></div> <div><input name = "rating" /></div>
做些更像↓
<div id="players">
<div class="player">
<label>Name: </label><input class="playerName" type="text"/>
<label>Rank: </label><input class="playerRank" type="number"/>
</div>
<div class="player">
<label>Name: </label><input class="playerName" type="text"/>
<label>Rank: </label><input class="playerRank" type="number"/>
</div>
</div>
然後在jQuery的
$(function() {
var players = []; //create an Array
$("#players .player").each(function(i, obj){
var playerName = $(this).children('.playerName').val();
var playerRank = $(this).children('.playerRank').val();
$(this).push({"name": playerName, "rank": playerRank}); // this will give you an array of objects like in my previous answer, then you can use that data to display it.
});
players.sort(function(a, b) {
return (a.rank - b.rank) || a.name.localeCompare(b.name);
});
$.each(players, function(index, value){
$("#result").append('<div id="' + value.name + '">' + value.name + ' is ranked ' + value.rank + '</div>');
})
});
？
var pl=[['Jack',1],['Jill',2],['Lucy',3],['Marc',4],['John',5],['Eva',6],['Anne',7],['Ben',8]];
divs=$('div[id^=NAME]');
pl.forEach(function(v,i){divs[i].innerHTML=v[0]+' (rank: '+v[1]+')';})div {display: inline-block; width:120px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NAME-1"></div> vs. <div id="NAME-2"></div><br/>
<div id="NAME-3"></div> vs. <div id="NAME-4"></div><br/>
<div id="NAME-5"></div> vs. <div id="NAME-6"></div><br/>
<div id="NAME-7"></div> vs. <div id="NAME-8"></div><br/>
<div id="NAME-9"></div> vs. <div id="NAME-10"></div><br/>
<div id="NAME-11"></div> vs. <div id="NAME-12"></div><br/>
<div id="NAME-13"></div> vs. <div id="NAME-14"></div><br/>
<div id="NAME-15"></div> vs. <div id="NAME-16"></div><br/>
<div id="NAME-17"></div> vs. <div id="NAME-18"></div><br/>
<div id="NAME-19"></div> vs. <div id="NAME-20"></div><br/>
<div id="NAME-21"></div> vs. <div id="NAME-22"></div><br/>
<div id="NAME-23"></div> vs. <div id="NAME-24"></div><br/>
<div id="NAME-25"></div> vs. <div id="NAME-26"></div>pl是你的數組排序數組和divs是包含你的目標的jQuery的div你想放的值，也許他們都可以在一個封閉的容器中發現了什麼？在這種情況下，您可以使用不同的選擇器來查找它們。
編輯：（答案編輯的問題）
要從輸入字段收集的數據，你可以做到以下幾點：
$(function(){
var i,str='';
for (var i=1;i<11;i++)
str+='<input type="text" name="n'+i+'" placeholder="Name '+i+'"/> '
+'<input type="text" name="r'+i+'" placeholder="Rating '+i+'"/><br/>';
$('#frm1').prepend(str);
$('#go').click(go);
})
function go(){
var name, jsn=$.makeArray($('input','#frm1').map(function(i,o){
var v=$(o).val(); if (i%2 && v>0) return [[name,v]]; else name=v;}));
jsn.sort(function(a,b){ return a[1]-b[1];});
$('#result').text(JSON.stringify(jsn));
return false;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm1"><button id="go">go</button></form>
<pre id="result"></pre>那麼，萬一「它不*幫助」，爲什麼不告訴我？爲什麼downvote？ – cars10m
注意，額定輸入字段簡化了操作。沒有更多的代碼查找巫術。簡單的方法是更清潔，更好，恕我直言。 – verlager
我改變了列表的格式。明智的直接代碼是我的目標。我在兩個相關的輸入字段中添加了name =「name」和name =「rating」。希望有人能幫助我。 – verlager
我越來越深入。我將重新編輯該問題。 – verlager