javascript - 如何在另一个 div 中添加一个 div 但在随机位置

Question

我正在动态创建 div，并希望它们在随机位置而不是最后一个位置添加到父 div，例如

                        var opt = document.createElement("div");
                        var txt = document.createTextNode(str);
                        opt.appendChild(txt);


                        //get the top and left positioning of the elements
                        var x = Math.floor(Math.random() * (400));
                        var y = Math.floor(Math.random() * (50));

                        opt.style.top = y + "px";
                        opt.style.left = x + "px";
                        opt.style.zIndex = zindex;   

                        $("#parentDiv").append(opt);

但问题是 jquery 的 append 函数或 add 函数将 div 放在堆栈的最后位置。我希望它随机放置在其他 div 之间...帮助

Answer 1

var $parent = $('#parentDiv');
var $children = $parent.children();             // get possible children
var n = $children.length;                       // there are n children
var pos = Math.floor((n + 1) * Math.random());  // and n+1 insert points

if (n === pos) {
    $parent.append(opt);                        // append after last
} else { 
    $children[pos].before(opt);                 // or insert before
}

编辑我清理了这个以将没有孩子/最后一个孩子的情况合并在一起。

Answer 2

如果已经有 div：

var i = Math.round(Math.random() * $('#parentDiv').length);
if (i != $('#parentDiv div').length) $('#parentDiv div').eq(i).before(opt);
else $('#parentDiv div').eq(i - 1).after(opt);