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

Question

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

这是我的例子：

HTML：<div id="selectors"></div>

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

var elements = [];

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

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

任何人都建议我采用正确的方法或告诉我最好的方法。

Here is the Live Demo

我看的输出应该是：

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

Answer 1

你最好使用map()，它无论如何都会返回jQuery对象。然后，您可以通过sort() s：

继续id您的选择框

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

JSFiddle

Answer 2

JSFiddle：http://jsfiddle.net/TrueBlueAussie/8UKgr/1/

使用空的jQuery对象/集合$()并向其添加元素。

var elements = $();

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

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

更新（+排序）：http://jsfiddle.net/TrueBlueAussie/8UKgr/6/

从这里使用jQuery sortElements扩展名：http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('#selectors').append(elements);
elements.sortElements(function (o1, o2) {
    return o1.id >= o2.id ? 1 : -1;
});

Answer 3

试试这个......

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

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

你可以在这里查看.. http://jsfiddle.net/kka284556/8UKgr/2/

Answer 4

我认为你想要排序数组。所以对于使用jquery object的第一个排序.sort()数组。

object = object.sort(function (a, b) {  if (a.id< b.id) {
        return -1;
    }
    else if (a.id> b.id) {
        return 1;
    }
    return 0; });

然后使用.each()

逐个获取数组项

请尝试以下代码：

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

Working Example

或者您也可以使用HTML Elements Object Collection。创建一个空集合$()。

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

Working Example

Answer 5

或者这......

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

更多代码但性能更佳。 JSFIDDLE

Answer 6

试试这个......

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

点击此链接：http://jsfiddle.net/8UKgr/11/