Question

我有一个看起来像这样的页面：

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

我想知道是否有一种方法可以在任何“item”div之间插入div 随机，所以当页面加载时，它看起来像：

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="rondomDiv">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

具有“item”类的所有div都是动态生成的，无法修改。有任何想法吗？提前谢谢！

Answer 1

我建议，等待进一步的信息：

$('.item').eq(
    /* I'm using the eq() method to select a specific element,
       and creating the random number (in the range from 0-(number-of-elements))
       within the method to avoid creating unnecessary variables. */
    Math.floor(Math.random() * $('.item').length)
    /* after() creates an element from the html string, and inserts it after
       the element selected earlier with the eq() method */
).after('<div class="random"></div>');

JS Fiddle demo

略微改变，但更详细，替代上述：

$('<div />', {
    'class': 'random',
        'text': '...'
}).insertAfter($('.item').eq(Math.floor(Math.random() * $('.item').length)));

JS Fiddle demo

参考文献：

Answer 2

尝试以下内容，

var $items = $('#container').find('.item');
var pos = Math.floor(Math.random() * $items.length)

$('.randomDiv').insertAfter($items.eq(pos));

Answer 3

代码：

<强> HTML：

<div id="container">

</div>

<强> JS：

$(document).ready(function(){
    for(var i =1; i<10; i++) {
        $("#container").append("<div class='item' id='"+i+"'>Item</div>"); /*adding item divs dynamically */
    }

    /*the real magic is below */
    var rand_id = Math.floor((Math.random()*10)+1); /*generating an item divs ID randomly */
    $("#"+rand_id).after("<div class='randomDiv'>Random DIv</div>"); /*adding the random div after that div of the rand_id */
});

小提琴：http://jsfiddle.net/mareebsiddiqui/ULcTc/

说明：

这很简单。首先，我动态添加item div，分别给它们ID，从1开始到10结束。然后我使用Math.floor()和Math.random() JavaScript函数生成一个随机ID。然后我使用一个简单的技术获取具有该随机ID的div，然后在该div之后添加一个随机div。

Answer 4

试试这个 -

var $items = $('#container .item');
$items.eq(Math.floor(Math.random() * $items.length ))
        .after("<div class='rondomDiv'></div>");

Answer 5

如果你什么都没试，我就不会提供代码。

但如果您不知道从哪里开始并需要工作流程：

判断容器中div的数量创建一个介于0和div数之间的随机数。

使用随机数索引在div后面添加div。

Answer 6

这将有效：

function randomDiv() {
    var divCount = $(".item").length;
    var randomnumber=Math.floor(Math.random()*divCount);

    $("div.item:eq(" + randomnumber + ")").after("<div class='randomDiv'>hey im random</div>");
}

演示：http://jsfiddle.net/meaFv/

Answer 7

根据代码行，这是一个非jQuery答案等同于jQuery答案的情况：

// Assuming you already have a reference to the random div at "randomDiv"
var container = document.getElementById('container');
var position = Math.floor(Math.random() * container.childNodes.length);
container.insertBefore(randomDiv, childNodes[position]);

Answer 8

此处示例：http://jsfiddle.net/qbqfR/按RUN一次以查看它的实际效果。

var x=Math.floor(Math.random()*$('#container').children().length);

$('#container div').eq(x).append('<div class="rondomDiv">YAY</div>');

Answer 9

itemLength = $('#container .item').length; //quantity of .items
randomPlace = Math.floor((Math.random()*itemLength)); //some random from 0 to .item length

randomDiv = $('<div />',{
    'class':'randomDiv',
    text: randomPlace
}); //.randomDiv

$('#container .item').eq(randomPlace).after(randomDiv); //place it after the .item of position 'randomPlace'

http://jsfiddle.net/RaphaelDDL/4tpCy/

在div列表中的随机位置插入div

9 个答案:

代码：

说明：