Ошибка в получении свойства верхней позиции сброшенных элементов

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 = $(idOfEl); 

Изменено в

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