1

我有一个对象（从 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 的顺序

4

2 回答 2

3

看看这是否有效？

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);
于 2013-06-05T14:06:55.830 回答
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 就是这个

于 2013-06-05T14:13:03.817 回答