Question

我制作了一个个人项目，我可以在搜索栏中输入电影标题并获取相关信息。数据在json中，它使用omdb中的api。这是代码的主要部分：

//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个特定的 div 中？我也注意到，有时在较低的索引之前检索较高索引的电影。当我使用循环来控制它时，这怎么可能？

Answer 1

因为$.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 2

正如WhiteHat正确地说，$ .getJSON是异步的，不能保证一个人会先完成另一个。你也可以看到＆＃39; j＆＃39;的价值。 $ .getJSON完成之前的更改。

如果您想确保getJSON同步运行，可以使用promises。

在jQuery 1.5中，Ajax方法返回promise。返回值具有在getJSON完成时运行的.done（），。round（）和.fail（）方法。

groovydoc

注意：其他方法是使用回调函数进行递归调用。

此外，您可以确保＆＃39; j＆＃39;它运行$ .getJSON时不会改变。这是异步的但是＆＃39; j＆＃39;不会改变。

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']);

Answer 3

您可以使用css为您的for-info类提供底部的边框和边距，如下所示：

（注意：我使用：not（：last-child）选择器不将分隔符应用于最后一个div。）

＆＃13;

.for-info:not(:last-child) {
  border-bottom: 2px solid black;
  margin-bottom: 10px;
}

.for-info {
  height: 40px;
  background-color: #c3c3c3;
}

＆＃13;

<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>

＆＃13;

在动态创建的div中创建分区

3 个答案: