1

DOM に追加したい複数のレコードを持つ (json リクエストから返された) オブジェクトがあります。オブジェクト要素は特定の順序になっているため、これらの要素を 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 に個別に追加する (オーバーヘッドが増加する) ことなく、要素の順序を保持するにはどうすればよいですか?

前もって感謝します！

UPDATE ポスターは、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

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 に答える