javascript - How to load and then replace that content after specific time via ajax? -

i have problem ajax :

scenario : onclick "triggre", load content first div of "noti.html" via ajax "#topnoti" , after change/replace loaded content after specific time second div of "noti.html" , on until last div content not loaded.

noti.html:   `  ....      <div id="inq">      <div id="div1">this first div</div>      <div id="div2">this second div</div>      <div id="div3">this third div</div>      <div id="div4">this fourth div</div>     ...      <div id="div24">this last div</div>       </div>     ... 

'

#topnoti:     <div id="topnoti"></div> 

thanks , regards

currently used :

$(".trigger").click(function(){ var index=1; $m=$("#inq").find("div"+index); setinterval(function(){ $("#topnoti").load("noti.html",$m); index=index+1; if(index==25){ index=1; } },10000); }); 

but code load div. can give me solution load "div" 1 one

i modify script n can want. code is:

 var index=0;  setinterval(function(){  $("#topnoti").load("noti.html #div"+index);  index=index+1;  if(index==25){index=0;}  },2000); 

so, can improve code...

thanks n regards

use following code:

http://jsfiddle.net/gbqzh/

var index = 0; var count=$("#topnoti div").length; $("#topnoti div").hide().eq(index).show(); setinterval(function() {      $("#topnoti div").hide().eq(index).show();      index = index + 1;                 if (index == count) {          index = 0;       } }, 1000);