在動態創建的div中創建分區

Question

我做了一個個人項目，我可以在搜索欄中輸入電影標題並獲取有關它們的信息。數據在使用omdb的api的json中。下面是代碼的主要部分：

//film[] is an array of strings contains movie titles 

//this array works perfectly giving me 0 through lenght-1 elements 
for(var i= 0; i< film.length; i++) 
    console.log(i+" : "+film[i]); 
console.log("Film you entered is "+ film); 

//#load is section element that is use to display "loading" while the data is recieved 
$('#load').html("<h2>LOadiNG.....................</h2>"); 

//looping for each movie 
for(var j= 0; j< film.length; j++){ 
    $.getJSON("http://www.omdbapi.com/?t="+film[j]+"&y=&plot=short&r=json", function(json) { 

     //does not work if I give 3 titles, shows "processing 3 : undefined" all the time 
     console.log("processing "+j+" : "+film[j]); 

     /* 
     *#info is section element where the data is displayed 
     *".for-info" styles each div child inside section so that each movie has a visible seperation 
     *(this is what I want) 
     */ 
     $("#info").append("<div id="+j+" class='for-info'></div>"); 
     $('#load').empty(); 

     //append each key-value in its particular div 
     for(val in json) 
      $("#"+j).append('<p>'+val+' --> '+json[val]+'</p>'); 
     $("#"+j).append("<p><br/></p>"); 
}); 

所以我的問題是如何創建使用DIV使得每個電影數據是1個特別格在部分師？另外我注意到，有時候索引較高的電影會在較低索引之前被檢索出來。當我使用循環來控制它時，這怎麼可能？

Answer 1

作爲的WhiteHat說得好，$ .getJSON是異步的，不能保證在另一個之前將完成。你也可以在$ .getJSON完成之前看到'j'的值發生了變化。

如果要確保getJSON同步運行，可以使用promises。

在jQuery 1.5中，Ajax方法返回promise。返回值包含getJSON完成時運行的.done（），.always（）和.fail（）方法。

function processFilms (film, i) { 
    if(!i) i = 0; 
    if (film && i >= 0 && i < film.length){ 
     $.getJSON("http://www.omdbapi.com/?t="+film[i]+"&y=&plot=short&r=json") 
     .done(
     function (json) { 
      console.log("processing "+i+" : "+film[i]); 
      $("#info").append("<div id="+i+" class='for-info'></div>"); 
      for(val in json) 
       $("#"+i).append('<p>'+val+' --> '+json[val]+'</p>'); 
      $("#"+i).append("<p><br/></p>"); 
      $('#load').empty(); 
      processFilms(film, i+1); 
     } 
    ); 
    } 
} 

processFilms(['Fast', 'Nemo']); 

注意：其他方法是使用回調函數爲你做遞歸調用。

此外，您可以確保'j'在運行$ .getJSON時不會改變。它是異步的，但'j'不會改變。

for(var j= 0; j< film.length; j++){ 
     (function (j_aux) { 
     $.getJSON("http://www.omdbapi.com/?t="+film[j]+"&y=&plot=short&r=json", function(json) { 
       console.log("processing "+j_aux+" : "+film[j_aux]); 
       $("#info").append("<div id="+j_aux+" class='for-info'></div>"); 
       $('#load').empty(); 
       for(val in json) 
        $("#"+j_aux).append('<p>'+val+' --> '+json[val]+'</p>'); 
       $("#"+j_aux).append("<p><br/></p>"); 
     }); 
     })(j); 
} 

Answer 2

因爲$.getJSON是異步的，不能保證之前，其他

這樣一個將結束，創建和分配div前$.getJSON

for(var i= 0; i< film.length; i++){ 
    $('#load').html("<h2>LOadiNG.....................</h2>"); 

    for(var j= 0; j< film.length; j++){ 
     $("#info").append("<div id="+j+" class='for-info'></div>"); 
     $.getJSON("http://www.omdbapi.com/?t="+film[j]+"&y=&plot=short&r=json", function(json) { 
      for(val in json){ 
       $("#"+j).append('<p>'+val+' --> '+json[val]+'</p>'); 
      } 
      $("#"+j).append("<p><br/></p>"); 
      $('#load').empty(); 
     }); 
    } 
} 

Answer 3

你可以使用CSS來給你換信息類底部的邊框和邊距，如下所示：

（注意：我使用：not（：last-child）選擇器不將分頻器應用到最後DIV）

.for-info:not(:last-child) { 
 
    border-bottom: 2px solid black; 
 
    margin-bottom: 10px; 
 
} 
 

 
.for-info { 
 
    height: 40px; 
 
    background-color: #c3c3c3; 
 
}

<div id='movie1' class='for-info'>Some content...</div> 
 
<div id='movie2' class='for-info'>Some content...</div> 
 
<div id='movie2' class='for-info'>Some content...</div>