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

【问题标题】：Insert a div in a random location in a list of divs在 div 列表中的随机位置插入 div
【发布时间】：2013-06-21 14:52:36
【问题描述】：

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

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

我想知道是否有一种方法可以在任何“项目”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都是动态生成的，不能修改。有任何想法吗？提前致谢！

【问题讨论】：

当然可以。你试过什么吗？
贴出你试过的代码。当然有可能！一种方法可能是将项目的 ID 存储到一个数组中，然后从该数组中获取一个随机索引，然后在它之后或之前添加一个随机 div。

标签： javascript jquery html

【解决方案1】：

试试下面的方法，

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

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

【讨论】：

感谢 Vega，我会快速尝试一下，并提供一些反馈。

【解决方案2】：

我建议，等待更多信息：

$('.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.

参考资料：

【讨论】：

谢谢！正在努力使其他解决方案发挥作用，但由于某种原因，您的“冗长”解决方案立即起作用！你是救生员！

【解决方案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，方法是分别给它们从1 开始到10 结束的ID。然后我使用Math.floor() 和Math.random() JavaScript 函数生成一个随机ID。然后我获取（使用一种简单的技术）具有该随机 ID 的 div，然后在该 div 之后添加一个随机 div。

【讨论】：

它是动态生成的，因为 OP 希望它是！并有一个 ID，以便我可以处理特定的 div！ @大卫托马斯
“所有具有“item”类的 div 都是动态生成的”
啊...我误读了，最初，我出于某种原因将其阅读为“所有 div within 'item' 类都是动态生成的。”我很抱歉（并感谢您的澄清！），请投票... ;)

【解决方案4】：

如果你什么都不做，我不会提供代码。

但是如果你不知道从哪里开始并且需要一个工作流：

计算容器中的div个数创建一个0到div个数之间的随机数。

在带有随机数索引的 div 之后附加您的 div。

【讨论】：

【解决方案5】：

这将起作用：

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/

【讨论】：

【解决方案6】：

就代码行而言，这是非 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]);

【讨论】：

【解决方案7】：

此处的示例：http://jsfiddle.net/qbqfR/ 按 RUN 多次查看它的运行情况。

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

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

【讨论】：

【解决方案8】：

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/

【讨论】：

【解决方案9】：

试试这个 -

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

【讨论】：