削除された要素の 'top'位置プロパティを取得する際にエラーが発生しました

Question

私は、要素をドラッグアンドドロップしてこれらの要素に対していくつかのアクションを実行する必要があるプロジェクトで作業しています。現在、コンテナにドロップされた要素の位置を取得しようとしていますが、デバッガで次のエラーが発生しています。コンテキストにおける

エラー

trail.js:262 Uncaught TypeError: Cannot read property 'top' of undefined

方法

function saveFlowchart(){ 
    var nodes = []; 

    ////////////////////////////////////////////////////////////////// 
    //Code in Context to the question// 

    var matches = []; 
    var searchEles = document.getElementById("container").children; 
    for(var i = 0; i < searchEles.length; i++) 
    { 
     matches.push(searchEles[i]); 
     alert("elements: "+ searchEles[i].id); 
     var idOfEl = searchEles[i].id; 

     var $element = $(idOfEl); 
     var position = $element.position(); 
     position.bottom = position.top + $element.height(); 
     position.right = position.left + $element.width(); 
     alert("Top position: " + position.top + "\nLeft position: " + position.left + "\nBottom position: " + position.bottom + "\nRight position: " + position.right); 
    }  
    ///////////////////////////////////////////////////// 

    $(".node").each(function (idx, elem) { 
     var $elem = $(elem); 
     var endpoints = jsPlumb.getEndpoints($elem.attr('id')); 
     console.log('endpoints of '+$elem.attr('id')); 
     console.log(endpoints); 
     nodes.push({ 
      blockId: $elem.attr('id'), 
      nodetype: $elem.attr('data-nodetype'), 
      positionX: parseInt($elem.css("left"), 10), 
      positionY: parseInt($elem.css("top"), 10) 
     }); 
    }); 
    var connections = []; 
    $.each(jsPlumb.getConnections(), function (idx, connection) { 
     connections.push({ 
      connectionId: connection.id, 
      pageSourceId: connection.sourceId, 
      pageTargetId: connection.targetId 
     }); 
    }); 

    var flowChart = {}; 
    flowChart.nodes = nodes; 
    flowChart.connections = connections; 
    flowChart.numberOfElements = numberOfElements; 

    var flowChartJson = JSON.stringify(flowChart); 
    //console.log(flowChartJson); 

    $('#jsonOutput').val(flowChartJson); 
} 

この方法は、接続を保存し、JSON形式で出力します。しかし、私はカスタムメイドの要素も再生成する必要があります。だからこそ、私はそこに位置を得て、それを再生成して、私が作成したフローチャートを再現できるようにしようとしています。

この点で任意の助けが理解されるであろう。

Answer 1

次のコード

var $element = $("#" + searchEles[i].id); 

ように変更

var $element = $(idOfEl); 

の

前のラインを助けるかもしれません