Javascript 随机定位div中的数组值

以此为起点，我尝试随机定位包含数组中文本的div

当前代码主要复制了链接帖子中Ken 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 brawnstext=[]和填充该数组的each函数

---

我的问题是，我需要迭代数组，以便创建的每个新div都使用下一个项作为其内容，即div 1使用数组项0，div 2使用项1等等。。。直到它到达数组的末尾，然后再次开始该过程。

我对您的脚本进行了一些修改，以使用递归函数来迭代数组，并保持延迟和淡入淡出：

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

}());

---

你有这样的工作实例吗？如何调用makeDiv？能否将var-brawnstext=[]置于makeDiv函数之外？