编辑答案：

Question

如何基于每行两个输入字段创建一个javascript JSON（？）对象，包含48行？

我有这个：

l := []int{}
for i:=100; i<600; i+=100{
    l = append(l, i)
}

然后我想在评级（desc）上对对象进行排序。可以这样做吗？

Answer 1

<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>');
  })
});

Answer 2

这会有帮助吗？

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>

Answer 3

你可以试试我的方式：

将所有行放入1个表单，每个输入都有唯一的名称。
通过jquery获取表单数据。
使用我的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>

从输入创建JSON

3 个答案:

编辑答案：