Вставте розділ div у випадкове розташування у списку divs

У мене є сторінка, яка виглядає так:

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</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>

Всі divs з класом "item" динамічно генеруються і не можуть бути змінені. Будь-які ідеї? Спасибі заздалегідь!

0
Опублікуйте код, який ви пробували. Звичайно це можливо! Одним з підходів може бути те, що ви зберігаєте ідентифікатори елементів у масиві, потім збираєте випадковий індекс з цього масиву, а потім після або до додавання випадкового div.
додано Автор Mohammad Areeb Siddiqui, джерело
перевірити мою відповідь!
додано Автор Mohammad Areeb Siddiqui, джерело
Звичайно це можливо. Ви щось пробували?
додано Автор j08691, джерело

9 Відповіді

Я запропонував би отримати додаткову інформацію:

$('.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
додано
Дякую! Було важко отримати інші рішення для роботи, але чомусь ваше "докладне" рішення негайно працювало! Ти заощаджуєш життя!
додано Автор imieliei, джерело

Спробуйте щось на зразок нижче

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

$('.randomDiv').insertAfter($items.eq(pos));
3
додано
Спасибі Vega, я дам це швидку спробу, і поверніться з деякими відгуками.
додано Автор imieliei, джерело

Код:

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.

1
додано
Ах ... Я помиляюся, що спочатку я читав його з якихось причин, оскільки "всі divs в межах класу" item "динамічно генеруються". Мої вибачення (і дякую за роз'яснення!), Проголосували ...;)
додано Автор David Thomas, джерело
Він динамічно генерується, оскільки OP хоче, щоб це було! і має ідентифікатор, так що я можу звернутися до конкретного div! @DavidThomas
додано Автор Mohammad Areeb Siddiqui, джерело
"Всі divs з класом" item "динамічно генеруються" <- це те, що сказали OP! Тому, щоб створити свою скрипку, мені потрібно було додати це! :)
додано Автор Mohammad Areeb Siddiqui, джерело
@DavidThomas спасибі і вибачення прийнято :)
додано Автор Mohammad Areeb Siddiqui, джерело

Приклад тут: http://jsfiddle.net/qbqfR/ Натиснувши RUN кучу разів, щоб побачити його в дії .

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

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

Спробуйте це -

var $items = $('#container .item');
$items.eq(Math.floor(Math.random() * $items.length ))
        .after("<div class='rondomDiv'></div>");
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>");
}

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

0
додано

Я не буду надавати код, якщо ви нічого не пробували.

Але якщо ви не знаєте, з чого почати, і вам потрібен робочий процес:

Не вкажіть кількість div у контейнері. Створіть випадкове число від 0 до числа div.

Додайте ваш div після div з індексом випадкових чисел.

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

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram