CODEWITHSUNDEEP
javascriptjqueryhtml
imieliei
imieliei

Reputation: 19

Insert a div in a random location in a list of divs

I have a page that looks like so: 

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

I was wondering if there is a way that I could insert a div randomly between any of the "item" divs, so when the page is loaded, it would look like: 

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

All the divs with the "item" class are dynamically generated, and cannot be modified. Any ideas? Thanks in advance!

Upvotes: 0

Views: 1891

Answers (9)

David Thomas
David Thomas

Reputation: 253406

I'd suggest, pending further information:

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

A slightly altered, though more verbose, alternative to the above:

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

JS Fiddle demo.

References:

Upvotes: 4

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

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.

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

Try this -

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

Upvotes: 0

RaphaelDDL
RaphaelDDL

Reputation: 4480

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/

Upvotes: 0

NibblyPig
NibblyPig

Reputation: 52952

Example here: http://jsfiddle.net/qbqfR/ Press RUN a bunch of times to see it in action.

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

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

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71939

This is a case where the non-jQuery answer is equivalent to the jQuery answer, in terms of lines of code:

// 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]);

Upvotes: 0

tymeJV
tymeJV

Reputation: 104785

This will work:

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>");
}

Demo: http://jsfiddle.net/meaFv/

Upvotes: 0

FLX
FLX

Reputation: 2679

I will not provide code if you tried nothing.

But if you don't know where to start and need a workflow :

Coun't the number of div in container Create a random number between 0 and the number of div.

Append your div after the div with the random number index.

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Try something like below,

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

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

Upvotes: 5

Related Questions