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

时间:2012-08-23 11:09:58

标签: javascript jquery html random

我正在动态创建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之间......帮助

2 个答案:

答案 0 :(得分:3)

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
}

编辑我清理了这个以将无子女/最后一个孩子的案例合并在一起。

答案 1 :(得分:-1)

如果已经有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);