jQuery slideDown of Ajax return, with div delay

Question

This should be simple.

I have ajax returning string, with multiple divs. I need to count each div in the string (so if necessary maybe i have to create an array) and then slideDown each div every x seconds with a little .delay('200');.

Please keep in mind the ajax return could be different on each return so it has to work for x amount of divs.

For example

// For testing lets pretend ajax.return is
ajax.return = '<div>BLEH CONTENT</div> <div>BLEH CONTENT</div>';

var com = $(ajax.return).hide();
com.prependTo('#container').slideDown('fast'); 

Right now the code I have obviously does one quick slideDown of all the divs in ajax.return it treats it as one string and prepends the whole string.

Can someone help me create a loop for each div in the string and apply a slideDown for each one with a 1 or 2 sec delay in between each slideDown.

Answer 1

From the top of my head:

$('div', ajax.return).each(function() {
  $(this).prependTo('#container').slideDown('fast'); 
});

Answer 2

Maybe something with recursion, like this (tested):

ajaxret = $('<div>BLEH CONTENT</div><div>BLEH CONTENT</div>').hide();
ajaxret.prependTo('#container');

var toSlide = $('#container div'); // add .andSelf() to include container 
var i = 0;
( function revealNext() {
    toSlide.eq( i++ ).delay('1000').slideDown('fast', revealNext);
//           each div        1sec      
})();

​ You can probably be a little more concise with selectors and such, but you get the general idea.

Answer 3

Working Demo

var a = '<div>BLEH CONTENT</div><div>BLEH CONTENT</div>';

$(a).prependTo('#container').hide().each(function(i){
    var self = $(this);
    window.setTimeout(function() { self.slideDown('fast'); },1000*i);
});

depending on how many divs you have, setting up multiple setTimeouts may be become a problem. I'm not overly sure if there is a limit to how many can be set at any one time without severely affecting timings. Anyone care to comment?