Div дисктерінің тізімінде кездейсоқ жерде орналастыру

Менде мынадай бет бар:

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

Мен кез-келген «item» divs арасында 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 динамикалық түрде жасалады және оны өзгерту мүмкін емес. Кез келген идеялар? Алдын-ала рақмет!

0
Сіз тырысқан кодты жіберіңіз. Әрине, бұл мүмкін! Бірден-бір тәсіл сіз идентификатордың элементтерін массивке сақтап, сол жиымнан кездейсоқ индексті таңдап, содан кейін кездейсоқ дивты қосқаннан кейін немесе бұрын.
қосылды автор 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
қосылды
Рахмет Вега, мен мұны тез әрекет етемін және кері байланысқа ораламын.
қосылды автор 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
қосылды
Ал ... Мен бастапқыда «оны ішіндегі <div> <div> <div> <div> <div> <div> сыныбының динамикалық түрде жасағанын оқыдым. Кешірім сұраймын (түсініктеме алғысымды білдіремін!), Дауысқа ие болыңыз ...;)
қосылды автор David Thomas, көзі
Ол динамикалық түрде қалыптасады, себебі ОП өзі болғысы келеді! және белгілі бір div-ге жүгінуім үшін идентификаторы бар! @DavidThomas
қосылды автор Mohammad Areeb Siddiqui, көзі
«Барлық» divs «сыныппен динамикалық түрде жасалады» <- бұл ОП деді! Менің сиқырымды жасау үшін, оны қосу керек еді! :)
қосылды автор 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
қосылды