在「each」循環中，圖表被追加到上一個循環中創建的div中

Question

我一直在使用每個循環在每個div的每個循環中創建一個google條形圖和sankey圖表。 BLOQUES數組有三個元素。我遍歷它們，並在每個循環中創建一個div，以生成並放置條形圖和sankey圖表。但是，出於某種原因，所有sankey圖表都附加到第三個div（BLQ3_MAIN，在上一個循環中創建的div）。下面是我的代碼：

function drawBarChart() {   
    $.each(BLOQUES , function(index, bloque){ 
     $bloque = $("<div id='" + bloque + "_MAIN'></div>"); 

     $("#BLOQUES").append($bloque); 

     pages = $.grep(myArray, function(n, i) {return n.BLOQUE === bloque;}); 

     $.each(pages, function(index, page){     
      $page = $("<div style='class='" + page.PAGE_SHORT + "'></div>"); 
      $bloque.append($page); 

      //THE CODE FOR ADDING BARCHART GOES HERE 
      //AND IT WORKS FINE   
     }); 

     //################################################## 
     //DRAW SANKEY ACROSS PAGES FOR EACH BLOQUE 

     $.get('pw_' + bloque + '_COLL.csv', function(mydata){ 
      var arrayData = $.csv.toArrays(mydata, {onParseValue:$.csv.hooks.castToScalar});     
      var data = new google.visualization.arrayToDataTable(arrayData); 

      //SOME OTHER CODE SKIPPED 

      $sankey_holder = $('<div id="' + bloque + '_sankey"></div>');    
      $bloque.append($sankey_holder);     

      var chart_sankey = new google.visualization.Sankey(document.getElementById(bloque + '_sankey')); 
      chart_sankey.draw(data, options);   
     });  
    }); 
} 

關於以下兩行：

$sankey_holder = $('<div id="' + bloque + '_sankey"></div>');    
$bloque.append($sankey_holder);  

bloque攜帶在每次迭代中的預期值，但$bloque總是在第三環路創建div（即，BLQ3_MAIN）。可能我錯過了一些有關這些代碼應該如何工作的邏輯。

當我嘗試這個：

var chart_sankey = new google.visualization.Sankey($sankey_holder)); 

我收到Container is not defined錯誤。

任何想法和建議？

Answer 1

這是一個循環

$.get是異步內進行異步調用的結果，
這意味着循環不會等待$.get纔去下一個索引

時$.get完成終於完成，並觸發與mydata回調，
bloque等於最後一個值，因爲循環完成

鎖定的bloque值，
通話與bloque一個單獨的函數作爲參數
這將阻止引用的最後一個值，
當$.get完成

---

看到下面的代碼片段...

function drawBarChart() { 
    $.each(BLOQUES , function(index, bloque){ 
     $bloque = $("<div id='" + bloque + "_MAIN'></div>"); 

     $("#BLOQUES").append($bloque); 

     pages = $.grep(myArray, function(n, i) {return n.BLOQUE === bloque;}); 

     $.each(pages, function(index, page){ 
      $page = $("<div style='class='" + page.PAGE_SHORT + "'></div>"); 
      $bloque.append($page); 

      //THE CODE FOR ADDING BARCHART GOES HERE 
      //AND IT WORKS FINE 
     }); 

     //################################################## 
     //DRAW SANKEY ACROSS PAGES FOR EACH BLOQUE 

     drawSankey(bloque); 
    }); 
} 

function drawSankey(bloque) { 
    $.get('pw_' + bloque + '_COLL.csv', function(mydata){ 
     var arrayData = $.csv.toArrays(mydata, {onParseValue:$.csv.hooks.castToScalar}); 
     var data = new google.visualization.arrayToDataTable(arrayData); 

     //SOME OTHER CODE SKIPPED 

     $sankey_holder = $('<div id="' + bloque + '_sankey"></div>'); 
     $bloque.append($sankey_holder); 

     var chart_sankey = new google.visualization.Sankey($sankey_holder[0]); 
     chart_sankey.draw(data, options); 
    }); 
} 

---

注：jQuery的參照的文CE到$sankey_holder是一個數組
使用第一元件以創建圖表

$sankey_holder[0] 

例如

var chart_sankey = new google.visualization.Sankey($sankey_holder[0]); 

---

也可能需要通過$bloque，以及，取決於它是定義，其中

drawSankey($bloque, bloque); 

... 

function drawSankey($bloque, bloque) {