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

Code:

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 */
});

Fiddle: http://jsfiddle.net/mareebsiddiqui/ULcTc/

Explanation:

This is simple. First I add the item divs dynamically by giving them ID's respectively with starting from 1 and ending on 10. Then I generate a random ID using Math.floor() and Math.random() JavaScript functions. Then I fetch(using a simple technique) the div with that random ID and then after that div I add a random div.

于 2013-06-21T15:01:14.340 に答える
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 に答える
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 に答える