jquery 将多个元素 append 到 DOM 会丢失排序顺序

Question

我有一个对象(从 json 请求返回)，其中有多个我想要 append 到 DOM 的记录。当我将这些元素插入到 DOM 中时，对象元素处于需要维护的特定顺序。

我想高效地插入它们，因此我设置了此代码块以将元素添加到对象包装器中，然后一次插入包装器，而不是单独 append 每个对象元素:

 var elmsToAppend = $();
 $.each( goFailureInfoRecords, function(i,e){

     elmsToAppend = elmsToAppend.add(
            $('<button/>', {
                'class': 'el-contents-center multiple-record',
                'html' : e.CreatedShort + &nbsp;Test#: ' + ( e.TestNum ? e.TestNum : 'None' ) + '&nbsp;' + e.CreatorID,
            })
    );
 });

$("<div/>").html( elmsToAppend );

问题是当 elmsToAppend被添加到<div>与 .html()函数 goFailureInfoRecords 中元素的原始顺序变得困惑。

如何保留 goFailureInfoRecords 中元素的顺序无需迭代每个元素并将它们单独 append 到 DOM(这会增加开销)？

提前致谢!

更新 海报一直要求显示 goFailureInfoRecords 包含的内容，因此这里是输出:

Object
   FailRecords: Array[3]
   0: Object
       Created: "2013-06-04 10:00:37"
       CreatedLong: "Tue Jun 4, 2013 10:00 AM"
       CreatedShort: "06/04/13 10:00 AM"
       CreatorID: "152204"
       DefectID: null
       EventID: "1455"
       MfgRev: "03"
       Mode: "PRODUCTION"
       PartNumber: "3EM22617ACAF"
       Symptom: null
       TestNum: "4"
       __proto__: Object
   1: Object
       Created: "2013-06-03 21:34:54"
       CreatedLong: "Mon Jun 3, 2013 9:34 PM"
       CreatedShort: "06/03/13 9:34 PM"
       CreatorID: "76705"
       DefectID: null
       EventID: "1431"
       MfgRev: "03"
       Mode: "PRODUCTION"
       PartNumber: "3EM22617ACAF"
       Symptom: null
       TestNum: "10"
       __proto__: Object
   2: Object
       Created: "2013-05-30 18:22:06"
       CreatedLong: "Thu May 30, 2013 6:22 PM"
       CreatedShort: "05/30/13 6:22 PM"
       CreatorID: "76705"
       DefectID: null
       EventID: "1354"
       MfgRev: "03"
       Mode: "PRODUCTION"
       PartNumber: "3EM22617ACAF"
       Symptom: null
       TestNum: "10"
       __proto__: Object
   length: 3

所讨论的顺序是 FailRecords 元素 0、1 和 2 的顺序

Answer 1

看看这是否有效？

var frag = document.createDocumentFragment();

for (key in goFailureInfoRecords) {
    var btn = document.createElement('button'),
          e = goFailureInfoRecords[key];

    btn.className = 'el-contents-center multiple-record';
    btn.innerHTML = e.CreatedShort +'  Test#: ' + ( e.TestNum ? e.TestNum : 'None' ) + ' ' + e.CreatorID;

    frag.appendChild(btn);
}

var div = document.createElement('div');
div.appendChild(frag);

$('#some_actual_DOM_element').html(div);