CODEWITHSUNDEEP
jqueryhtmldomappend
sadmicrowave
sadmicrowave

Reputation: 40892

jquery appending multiple elements to DOM loses sort order

I have an object (returned from a json request) that has multiple records that I want to append to the DOM. The object elements are in a specific order that needs to be maintained as I insert these elements into the DOM.

I want to insert them efficiently so I've setup this code block to add the elements to an object wrapper then insert the wrapper at one time rather than appending each object elements independently:

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

The problem is that when elmsToAppend gets added to <div> with the .html() function the original order of the elements within goFailureInfoRecords gets mixed up.

How can I preserve the order of the elements within goFailureInfoRecords without iterating over each element and appending them to the DOM individually (which increases overhead)?

Thanks in advance!

UPDATE posters have been asking to display what goFailureInfoRecords contains so here is the output:

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

The order in question is the order of FailRecords elements 0, 1, and 2

Upvotes: 1

Views: 4142

Answers (2)

adeneo
adeneo

Reputation: 318192

See if this works ?

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

Upvotes: 3

jvilhena
jvilhena

Reputation: 1131

try replacing the $() with an array:

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

The jsfiddle i used was this one

Upvotes: 2

Related Questions