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

Posted 2023-05-09

【中文标题】将多个元素附加到 DOM 的 jquery 会丢失排序顺序

【英文标题】：jquery appending multiple elements to DOM loses sort order

【发布时间】：2013-06-01 05:44:11

【问题描述】：

我有一个对象（从 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 );

问题在于，当使用.html() 函数将elmsToAppend 添加到<div> 时，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 的顺序

【问题讨论】：

对象中的顺序永远无法保证，因此您不能依赖它。

你应该给goFailureInfoRecords对象添加一个属性，指定一个顺序，然后根据这个属性值向DOM添加元素

@roasted 你能举个例子吗？

@sadmicrowave 您能否提供如何创建 goFailureInfoRecords 对象列表？

问题不是真正的循环或插入 DOM，而是按顺序发生的，但 goFailureInfoRecords 中的顺序并不能保证。如果顺序很重要，您应该使用数组，但您必须向我们展示 goFailureInfoRecords 包含的内容？

【参考方案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);

【参考方案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

【讨论】：

顺序在 $.each() 循环中丢失，因此将数组设置在其中只会返回错误的顺序。这个想法虽然不错

好吧，根据描述“FailRecords: Array[3]”（我假设它只是一个数组），所以它应该保持顺序（jsfiddle.net/uFkTu/2）

我看到了，为什么不使用 for 循环：for (var i = 0, z = goFailureInfoRecords.length;i<z ;i++)

我认为这正是 jQuery 正在做的事情（没有检查源代码）。

我喜欢这个解决方案，因为它非常接近我当前插入元素的方法。