当两个集合中的1个字段匹配时，使用2组数据填充2个表

Question

我正在使用Josh Fraser的Backwards兼容window.postMessage（）（http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage），我遇到了麻烦。

我在页面上有2个iframe，而且两个iframe都将不同的数据发送到同一个父页面。换句话说，有2个XD.receivemessage函数从2个不同的iframe中获取2个不同的消息。这是我的代码的缩短版本：

<iframe id="IFRAME1" src="https://www.DOMAIN.com/PAGENAMEFIRST.php"></iframe>
<iframe id="IFRAME2" src="https://www.DOMAIN.com/PAGENAMESECOND.php"></iframe>

<div id="firstTable">
 <table>
  <tr>
   <th>Name</th>
   <th>Address</th>
   <th>ID</th>
  </tr>
  <tr>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
  </tr>
 </table>
</div>

<div id="secondTable">
 <table>
  <tr>
   <th>Email</th>
   <th>Twitter Handle</th>
   <th>ID</th>
  </tr>
  <tr>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
   <td><!--this will be filled in by the data--></td>
  </tr>
 </table>
</div>

<script type="text/javascript">
$(document).ready(function() {
//FIRST DATA PULL
var encodeUriFirst = encodeURIComponent(document.location.href);
var getMessageFirst = 'https://www.DOMAIN.com/PAGENAMEFIRST.php#' + encodeUriFirst;
$("#IFRAME1").attr('src',getMessageFirst);
XD.receiveMessage(function(getMessageFirst){
    var getDataFirst = getMessageFirst.data; 
    var getDataFirstEach = new Array();
    for(var a=0; a<getDataFirst.length; a++){ 
        getDataFirstEach = getDataFirst.split("~,~");
        $('div#firstTable table td:nth-child(0)').text(getDataFirstEach[0].replace(/[~]/g,""));
    }
}, 'https://www.DOMAIN.com');
//SECOND DATA PULL
var encodeUriSecond = encodeURIComponent(document.location.href);
var getMessageSecond = '//www.DOMAIN.com/PAGENAMESECOND.php#' + encodeUriSecond;
$("#IFRAME2").attr('src',getMessageSecond);
XD.receiveMessage(function(getMessageSecond){
    var getDataSecond = getMessageSecond.data; 
    var getDataSecondEach = new Array();
    for(var a=0; a<getDataFirst.length; a++){ 
        getDataSecondEach = getDataSecond.split("~,~");
        $('div#secondTable table td:nth-child(0)').text(getDataSecondEach[0].replace(/[~]/g,""));
    }
}, 'https://www.DOMAIN.com');
});
</script>

请记住，我已经显着缩减了代码。每个getDataFirst或getDataSecond

它实际上可以从两个iframe获取数据（发送/接收都工作）。我的数据以~name~,~address~,~ID~格式显示第一组数据，~email~,~twitter~,~ID~格式显示第二组数据。

我正在尝试将数据填充到2个表中。 For循环在表中查找ID，如果ID匹配，则填充与该ID关联的其他字段。在某些情况下，第一个数据集中的ID将与第二个数据集中的ID相同。发生这种情况时，for循环将数据放在两个表中而不是相应的表中。我想知道为什么会发生这种情况，因为我专门针对输出中$('div#firstTable')或$('div#secondTable')内的表格。例如：

$('div#firstTable table td:nth-child(0)').text(getDataFirstEach[0]);

For循环中的

是将getDataFirstEach[0]放入firstTable和secondTable表中吗？

谁能告诉我为什么？

根据要求，这是完整的JS：

var encodeUriGifts = encodeURIComponent(document.location.href);
var giftsMessage = '//www.DOMAIN.org/firstpage.php#' + encodeUriGifts;
$("#IFRAME1").attr('src',giftsMessage);
XD.receiveMessage(function(giftsMessage){
    var getDataGifts = giftsMessage.data; 
    var currentRecordGifts = new Array();
    var getGiftsLines = getDataGifts.split("|"); //LINES OF DATA ARE PIPE SEPARATED
    for(var bCnt=0;bCnt < getGiftsLines.length;bCnt++){ 
        var getGiftsEach = getGiftsLines[bCnt].split("`,`"); //EACH ITEM IS SEPARATED BY `,`
        for(var cCnt=0;cCnt < getGiftsEach.length;cCnt++){
            if (getGiftsEach[cCnt]!=="" && getGiftsEach[cCnt]!=="undefined"){
                currentRecordGifts[bCnt] = " <td class='giftamount'>"+getGiftsEach[1]+"</td><td class='giftdate'>"+getGiftsEach[2].replace(/[`]/g,"")+"</td>";
            }
            if (cCnt==2) {
                var thisGiftsID = getGiftsEach[0].replace(/[`]/g,"");
                $('#firstTable table td:contains("'+thisGiftsID+'")').closest('tr').find('td:nth-child(3)').after(currentRecordGifts[bCnt]);
            }
        }
        if (bCnt==0){
            $('#firstTable table th:nth-child(3)').after('<th class="BBListingHeading DirectoryListingHeading" scope="col" style="white-space: nowrap;">Last Gift Amount</th><th class="BBListingHeading DirectoryListingHeading" scope="col" style="white-space: nowrap;">Last Gift Date</th>');
        }
    }
}, 'https://www.DOMAIN.org');

var encodeUriChanges = encodeURIComponent(document.location.href);
var changesMessage = '//www.DOMAIN.org/secondpage.php#' + encodeUriChanges;
$("#IFRAME2").attr('src',changesMessage);
XD.receiveMessage(function(changesMessage){
    var getDataChanges = changesMessage.data; 
    var currentRecordChanges = new Array();
    var getChangesLines = getDataChanges.split("|");
    $('#secondTable table tr td:nth-child(3)').each( function() {
        $('#secondTable table tr td:nth-child(3)').after('<td class="BBListingItem DirectoryListingItem" style="white-space: nowrap;"><ul class="changes"></ul></td>');
    });

    for(var dCnt=0;dCnt < getChangesLines.length;dCnt++){ 
        var getChangesEach = getChangesLines[dCnt].split("`,`");
        for(var eCnt=0;eCnt < getChangesEach.length;eCnt++){
            if (getChangesEach[eCnt]!=="" && getChangesEach[eCnt]!=="undefined"){
                currentRecordChanges[dCnt] = "<li class='change'>"+getChangesEach[2]+" ("+getChangesEach[1].replace(/[`]/g,"")+")</li>";
            }
            if (eCnt==2) {
                var thisChangesID = getChangesEach[0].replace(/[`]/g,"");
                $('#secondTable table td:contains("'+thisChangesID+'")').closest('tr').find('td ul.changes').append(currentRecordChanges[dCnt]);
            }
            if (dCnt==0){
                $('#changesdiv .DirectoryListingTable th:nth-child(3)').after('<th class="BBListingHeading DirectoryListingHeading" scope="col" style="white-space: nowrap;">Change Details</th>');
            }
        }
    }
}, 'https://www.DOMAIN.org');