Значение массива в случайном порядке div

Question

Используя это - random position of divs in javascript в качестве отправной точки Я пытаюсь случайным образом позиционировать divs, содержащие текст из массива.

Текущий код (преимущественно скопированный ответ Кена Redler в связанном посте):

(function makeDiv(){ 
    var divsize = 200; 
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 

    //set up the array to hold the random div content 
    var boastsText = []; 
    var i = 0; 
    $(".boast ul li").each(function() { boastsText.push($(this).text()) }); 

    $newdiv = $('<div/>').css({ 
     'width':divsize+'px', 
     'height':divsize+'px', 
     'color': color 
    }); 

    // make position sensitive to size and document's width 
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 

    $newdiv.css({ 
     'position':'absolute', 
     'left':posx+'px', 
     'top':posy+'px', 
     'display':'none' 
    }).html(boastsText[i]).appendTo('body').fadeIn(100).delay(1000).fadeOut(500, function(){ 
     $(this).remove(); 
     makeDiv(); 
    }); 
})(); 

Единственное, что я действительно добавил является создание массива var boastsText = [] и функции each, которая заполняет этот массив.

Проблема в том, что мне нужно перебирать массив таким образом, чтобы каждый новый div создал следующий элемент, поскольку он является содержимым, т.е. div 1 использует элемент массива 0, div 2 использует элемент 1 и т. Д. ... до тех пор, пока он не достигнет конца массива, а затем снова запускает процесс.

Answer 1

Я изменил ваш сценарий немного, чтобы использовать рекурсивную функцию для того, чтобы итерации по массиву и поддерживать задержку и FadeIn/Out у вас есть:

(function() { 
    //set up the array to hold the random div content 
    var boastsText = []; 
    $(".boast ul li").each(function() { 
     boastsText.push($(this).text()); 
    }); 


    function makeDiv(i){ 
     var divsize = 200; 
     var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 

     var $newdiv = $('<div/>').css({ 
      'width':divsize+'px', 
      'height':divsize+'px', 
      'color': color 
     }); 
     // make position sensitive to size and document's width 
     var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
     var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 

     $newdiv.css({ 
      'position':'absolute', 
      'left':posx+'px', 
      'top':posy+'px', 
      'display':'none' 
     }).html(boastsText[i]).appendTo('body').fadeIn(100).fadeOut(500, function() { 
      $(this).remove(); 
      if (i === boastsText.length) return; 
      makeDiv(++i); 
     }); 
    } 

    //Start the recursion 
    makeDiv(0); 

}());