0

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

<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都是动态生成的，不能修改。有任何想法吗？提前致谢！

4

9 回答 9

4

试试下面的东西，

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

$('.randomDiv').insertAfter($items.eq(pos));
于 2013-06-21T14:55:48.897 回答
3

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

$('.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 小提琴演示。

一个稍微改变但更冗长的替代方案：

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

JS 小提琴演示。

参考：

于 2013-06-21T14:55:36.307 回答
1

代码：

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

于 2013-06-21T15:01:14.340 回答
0

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

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

$('#container div').eq(x).append('<div class="rondomDiv">YAY</div>');
于 2013-06-21T14:59:45.837 回答
0

尝试这个 -

var $items = $('#container .item');
$items.eq(Math.floor(Math.random() * $items.length ))
        .after("<div class='rondomDiv'></div>");
于 2013-06-21T14:56:33.973 回答
0

如果您什么都不尝试，我将不会提供代码。

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

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

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

于 2013-06-21T14:57:15.223 回答
0

这将起作用：

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/

于 2013-06-21T14:57:52.097 回答
0

就代码行而言，这是非 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]);
于 2013-06-21T14:58:54.227 回答
0 
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/

于 2013-06-21T15:02:26.977 回答