jQuery slideDown возврата Ajax с задержкой div

Question

Это должно быть просто.

У меня есть строка, возвращающая ajax, с несколькими div.Мне нужно подсчитать каждый div в строке (поэтому, если необходимо, возможно, мне нужно создать массив), а затем slideDown каждый div каждые x секунд с небольшим .delay ('200') ;.

Пожалуйста, имейте в виду, что возврат ajax может отличаться при каждом возврате, поэтому он должен работать на х количество делений.

Например,

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

Сейчаскод, который у меня есть, очевидно, выполняет один быстрый слайддон всех элементов div в ajax.return, он обрабатывает его как одну строку и добавляет всю строку.

Может кто-нибудь помочь мне создать цикл для каждого элемента div в строке и применитьslideDown для каждого с задержкой в ​​1 или 2 секунды между каждым slideDown.

Answer 1

Рабочая демонстрация

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);
});

В зависимости от того, сколько у вас есть делений, настройка нескольких setTimeout с может стать проблемой.Я не слишком уверен, есть ли предел тому, сколько может быть установлено в любое время без серьезного влияния на время.Кто-нибудь хочет прокомментировать?

Answer 2

Может быть что-то с рекурсией, вот так (проверено):

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      
})();

Возможно, вы можете быть немного более лаконичны с селекторами и тому подобным, но вы поймете общую идею.

Answer 3

От макушки моей головы:

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