2011-12-31 14 views
0

以下の単純なJSONを使用すると、どのようにjQueryを使用して各結果を1つずつDOMに追加できますか?jqueryを使用して各JSONオブジェクトを1つずつ追加する方法

新しい結果はそれぞれDOMに追加されるまでに3秒間遅れがあり、プロセスは何度も繰り返しループします(最も古いものが特定の時点で削除されます)。ここで

が持つべきものですが行われます。

<div class="001"><p>text</p></div> 

<!-- (3 seconds delay than add) --> 
<div class="002"><p>text</p></div> 

<!-- (3 seconds delay than add) --> 
<div class="003"><p>text</p></div> 

<!-- (3 seconds delay than add the first one back in if there is no more) --> 
<div class="001"><p>text</p></div> 

---- JSONデータを-----

{ 
    "results": [ 
     { 
      "id": 001, 
      "text": "text one", 
     }, 
     { 
      "id": 002, 
      "text": "text two", 
     }, 
     { 
      "id": 003, 
      "text": "text three", 
     } 
    ] 
} 

答えて

1

は、ここで(一定の遅延で親にデータを追加する機能です各項目のadditon間)ミリ秒:

function addDataWithDelay(parent, data, delay) { 
    var index = 0; 
    function add() { 
     if (index < data.length) { 
      var item = data[i]; 
      $(parent).append('<div class="' + item.id + '"><p>' + item.text + '</p></div>'); 
      ++index; 
      setTimeout(add, delay); 
     } 
    } 
    add(); 
} 

親はあなたが

に追加項目は、データがidとテキストプロパティを持つオブジェクトの配列ですたい親要素またはセレクタである - あなたのケースで、これは、アレイ

遅延は量である結果になります各追加の間隔(ミリ秒単位)