Javascript 如何将数组中的元素附加到容器中？

我通过shuffled从后端获取json对象。当它到达前端时，我将循环对象并根据其id值放置到数组中所以我对它们进行了正确的排序。但我无法将保存的元素附加到数组中

以下是我的例子：

HTML:

var对象=[
{“name”：“name4”，“id”：4}，
{“name”：“name1”，“id”：1}，
{“name”：“name3”，“id”：3}，
{“name”：“name2”，“id”：2}
]
var元素=[]；
$.each（对象、函数（索引、对象）{
var num=parseInt（对象id）
元素[num]=$（''，{'id'：num}）；
});
$（'#选择器'）。追加（$（元素））；

任何人都可以给我建议正确的方法或告诉我最好的方法

我希望输出应为：

<div id="selectors">
<select id="1"></select><select id="2"></select><select id="3"></select><select id="4"></select>

JSFiddle： 使用空jQuery对象/集合

$（）

，并向其添加元素

var elements = $();

$.each(object,function(index, obj){
    var num  = parseInt(obj.id)
    elements = elements.add($('<select></select>', {'id':num}));
});

$('#selectors').append(elements);

试试这个

$.each(object,function(index, obj){
    var num  = parseInt(obj.id)

    $('#selectors').append($('<select />').attr('id',num));
});

$。每个（对象、函数（索引、对象）{
var num=parseInt（对象id）
$（'#选择器'）.append（$（''）.attr（'id'，num））；
});

---

您可以在这里检查它。

您最好使用

map（）

，它返回jQuery对象。然后，您可以通过选择框的

id

s继续进行

sort（）

var elements = $.map(object, function(v){
    return $('<select></select>', {'id':parseInt(v.id)});
}).sort(function(a,b){
    return a.prop('id') > b.prop('id');
});

$('#selectors').append(elements);

var元素=$.map（对象、函数（v）{
返回$（''，{'id'：parseInt（v.id）}）；
}).排序（功能（a、b）{
返回a.prop（'id'）>b.prop（'id'）；
});
$（“#选择器”）.append（元素）；

我想您需要排序数组。因此，对于第一个排序
对象
数组，使用jquery
.sort（）


或者也可以使用HTML元素对象集合。创建一个空集合
$（）

var对象=[
{“name”：“name4”，“id”：4}，
{“name”：“name1”，“id”：1}，
{“name”：“name3”，“id”：3}，
{“name”：“name2”，“id”：2}
]
object=object.sort（函数（a，b）{返回a.id>=b.id？1:-1；}）；
var元素=$（）；
$.each（对象、函数（索引、对象）{
elements=elements.add（$（''，{'id'：obj.id}））；
});
$（'#选择器'）。追加（$（元素））；

或者这个

var fragment = document.createDocumentFragment();

object
.sort(function(a,b){return a.id > b.id})
.map(function(el){
    var select = document.createElement('select');
    select.id = el.id;
    fragment.appendChild(select);
});

$('#selectors').append(fragment);

代码更多但性能更好。
试试这个…

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

var elements = [];
object.sort(function(obj1, obj2) {
    // Ascending: first id less than the previous
    return obj1.id - obj2.id;
});

var sel = $('<select>').appendTo('#selectors');
$.each(object, function(i, option){

 sel.append($("<option>").attr('value',option.id).text(option.name));
});

var对象=[
{“name”：“name4”，“id”：4}，
{“name”：“name1”，“id”：1}，
{“name”：“name3”，“id”：3}，
{“name”：“name2”，“id”：2}
]
var元素=[]；
排序（函数（obj1、obj2）{
//升序：第一个id小于前一个id
返回obj1.id-obj2.id；
});
var sel=$（''）.appendTo（'#选择器'）；
$.each（对象、函数（i、选项）{
sel.append（$（“”）.attr（'value'，option.id）.text（option.name））；
});

检查此链接：
记住基数。即使它已经是发布代码中的一个数字。@David Thomas:它们是硬连线的，没有前导0，所以不是问题。如果服务器吐出前导0，我会非常惊讶：）元素排序不正确。我需要根据元素的id来追加元素。因此html的id将是class='1'，2，3，就像这样…问题是，我需要根据元素的序列号来追加元素。否则它将导致用户根据我的应用进行排序。@oGeez：如果您需要在附加之前进行预排序，请使用
oGeez
的地图答案。默认情况下，地图应按键排序。为了让我的
$（）
实现这一点，我需要一个带附件的虚拟元素，然后排序，然后附加到显示（我的现在开销太大了）：）我已经编辑了你的标题。请不要在问题标题中包含关于所用语言的信息，除非没有它就没有意义。标签就是为了这个目的。也请看，其中的共识是“不，他们不应该这样做。这是解决方案。但实现这一点需要很长的编码。@3gwebtrain:请参阅更新的答案。是的，您是对的，这是很长的编码，但我认为，这是实现您的任务的最简单的方法。（“TrueBlueAusie”也提出了一种实现方法，请参阅。）+1表示简短和甜蜜。您可以将其减少为
$（“”，{'id'：parseInt（v.id）}）；
，因为不需要元素close。
object = object.sort(function (a, b) {  if (a.id< b.id) {
        return -1;
    }
    else if (a.id> b.id) {
        return 1;
    }
    return 0; });

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

object = object.sort(function (a, b) { return a.id >= b.id ? 1 : -1; });

var elements = $();
$.each(object,function(index, obj){    
 $('#selectors').append($('<select></select>', {'id':obj.id}));
});

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

object = object.sort(function (a, b) { return a.id >= b.id ? 1 : -1; });

var elements = $();
$.each(object,function(index, obj){    
    elements = elements.add($('<select></select>', {'id':obj.id}));
});
$('#selectors').append($(elements));

var fragment = document.createDocumentFragment();

object
.sort(function(a,b){return a.id > b.id})
.map(function(el){
    var select = document.createElement('select');
    select.id = el.id;
    fragment.appendChild(select);
});

$('#selectors').append(fragment);

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

var elements = [];
object.sort(function(obj1, obj2) {
    // Ascending: first id less than the previous
    return obj1.id - obj2.id;
});

var sel = $('<select>').appendTo('#selectors');
$.each(object, function(i, option){

 sel.append($("<option>").attr('value',option.id).text(option.name));
});