Question

我有一个对象（从json请求返回），它有多个我想要追加到DOM的记录。当我将这些元素插入DOM时，对象元素按特定顺序需要维护。

我想有效地插入它们，所以我设置了这个代码块，将元素添加到对象包装器中，然后一次插入包装器，而不是独立地附加每个对象元素：

 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中元素的顺序而不迭代每个元素并将它们单独附加到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 +' &nbsp;Test#: ' + ( e.TestNum ? e.TestNum : 'None' ) + '&nbsp;' + e.CreatorID;

    frag.appendChild(btn);
}

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

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

Answer 2

尝试用数组替换$（）：

var elmsToAppend = new array();
$.each( goFailureInfoRecords, function(i,e){
     elmsToAppend = elmsToAppend.push(
        $('<button/>', {
            'class': 'el-contents-center multiple-record',
            'html' : e.CreatedShort + &nbsp;Test#: ' + ( e.TestNum ? e.TestNum : 'None' ) + '&nbsp;' + e.CreatorID,
        })
     );
});
$("<div/>").html( elmsToAppend );

我使用的jsfiddle是this one

将多个元素附加到DOM的jquery会丢失排序顺序

2 个答案: