Question

我对Javascript相对较新，并且想知道是否有一种快速方法可以随机播放多个<div>标记中包含的内容。例如

<div id='d1'>
  <span>alpha</span>
  <img src='alpha.jpg'>
</div>
<div id='d2'>
  <span>beta</span>
  <img src='beta.jpg'>
</div>
<div id='d3'>
  <span>gamma</span>
  <img src='gamma.jpg'>
</div>

<button onclick='shuffle_content();'>Shuffle</button>

点击按钮后，我希望d1，d2，d3中的内容改变位置（例如，d3可能是第一个，然后是d1，然后是d2）。

快速移动方法是复制第一个div元素（d1），然后将其放在最后（d3之后），然后删除原始d1。但这并不能真正随意化。它只是让事情进入循环（可能没问题）。

任何建议将不胜感激。感谢。

Answer 1

你可以使用像jQuery这样的javascript库吗？这是一个快速的jQuery示例来完成您所追求的目标。对HTML的唯一修改是添加了一个容器元素，如下所示：

<div id="shuffle">
    <div id='d1'>...</div>
    <div id='d2'>...</div>
    <div id='d3'>...</div>
</div>

和javascript：

function shuffle(e) {               // pass the divs to the function
    var replace = $('<div>');
    var size = e.size();

    while (size >= 1) {
       var rand = Math.floor(Math.random() * size);
       var temp = e.get(rand);      // grab a random div from our set
       replace.append(temp);        // add the selected div to our new set
       e = e.not(temp); // remove our selected div from the main set
       size--;
    }
    $('#shuffle').html(replace.html() );     // update our container div with the
                                             // new, randomized divs
}

shuffle( $('#shuffle div') );

Answer 2

最近的一个问题刚刚结束，但是我觉得我得到了比这里更好的答案。这种方法非常直接。复制HTML没有任何问题，因此保留了对DOM，样式，事件处理程序等的更改。

要对某些父元素的所有子元素进行随机播放，请选择一个随机子元素并将其一次追加到父元素中，直到所有子元素都被重新附加。

使用jQuery：

var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}

演示： http://jsfiddle.net/C6LPY/2

没有jQuery它就像它一样简单：

var parent = document.getElementById("shuffle");
var divs = parent.children;
var frag = document.createDocumentFragment();
while (divs.length) {
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}
parent.appendChild(frag);

演示： http://jsfiddle.net/C6LPY/5/

编辑：以下是代码的细分：

// Create a document fragment to hold the shuffled elements
var frag = document.createDocumentFragment();

// Loop until every element is moved out of the parent and into the document fragment
while (divs.length) {

    // select one random child element and move it into the document fragment
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}

// appending the document fragment appends all the elements, in the shuffled order
parent.appendChild(frag);

Answer 3

您可以获取每个div的内容

c1 = document.getElementById('div1').innerHTML
c2 = document.getElementById('div2').innerHTML
c3 = document.getElementById('div3').innerHTML

然后随机确定一个新订单..然后将每个内容放入新目的地

比如说，随机性给出了：

c1_div = 'div2'
c2_div = 'div1'
c3_div = 'div3'

然后你就是：

document.getElementById(c1_div).innerHTML = c1
document.getElementById(c2_div).innerHTML = c2
document.getElementById(c3_div).innerHTML = c3

Answer 4

通过@ gilly3在nice answer上进行扩展，使用jQuery实际上可以避免在循环中附加randomly sorting divs而不是{ {1}}一次全部删除：

div

演示：http://jsfiddle.net/ey70Lxhk/

但是请注意，该技术在随机性方面并不准确，它依赖于append，它与元素的数量不是线性比例。

Answer 5

我将div包装在一个外部div中，然后将其id传递给shuffle_content（）。

在那里，你可以用随机顺序创建一个新div，cloning包装div的节点来填充它，然后replace使用新div的包装div。

Answer 6

我会使用服务器端代码来完成此任务。我知道这不是你问题的真正答案，但是另一种实现。

最诚挚的问候，左弗兰克

Answer 7

对于您的HTML，您问题的简短回答是：

function shuffle_content() {
 var divA = new Array(3);
 for(var i=0; i < 3; i++) {
  divA[i] = document.getElementById('d'+(i+1));
  document.body.removeChild(divA[i]);
 }
 while (divA.length > 0)
  document.body.appendChild(divA.splice(Math.floor(Math.random() * divA.length),1)[0]);
}

为了达到目的，我写了以下内容，我觉得效果更好：

<html>
<div id="cards">
<div id="card0">Card0</div><div id="card1">Card1</div>
<div id="card2">Card2</div><div id="card3">Card3</div>
<div id="card4">Card4</div><div id="card5">Card5</div>
<div id="card6">Card6</div><div id="card7">Card7</div>
<div id="card8">Card8</div><div id="card9">Card9</div>
</div>
<button id="shuffle">Shuffle</button>
<script language="javascript">
<!--
document.getElementById('shuffle').onclick = function () {
var divCards = document.getElementById('cards');
var divCardsArray = new Array(
    document.getElementById('card0'),
    document.getElementById('card1'),
    document.getElementById('card2'),
    document.getElementById('card3'),
    document.getElementById('card4'),
    document.getElementById('card5'),
    document.getElementById('card6'),
    document.getElementById('card7'),
    document.getElementById('card8'),
    document.getElementById('card9')
    );
return function() {
    var mDivCardsArray=divCardsArray.slice();
    while (divCards.childNodes.length > 0) {
        divCards.removeChild(divCards.firstChild);
    }
    while (mDivCardsArray.length > 0) {
        var i = Math.floor(Math.random() * mDivCardsArray.length);
        divCards.appendChild(mDivCardsArray[i]);
        mDivCardsArray.splice(i,1);
    }
    return false;
}
}()
//-->
</script>
</html>

我试图将最后一次声明打包到：

    while (mDivCardsArray.length > 0) {
        divCards.appendChild(
            mDivCardsArray.splice(
                Math.floor(Math.random() * mDivCardsArray.length)
                ,1)[0]
        );
    }

但这很难读，容易出错。

使用jQuery或Prototype，您可以遵循相同的基本结构并获得您正在寻找的结果。

就我个人而言，如果你向cards堆栈添加2个div，扩展divCardsArray，插入以下样式块，并在{{1}之后添加此代码，我觉得它看起来更好定义。

divCardsArray

Answer 8

我建议你随机化内容，而不是实际的Divs本身。你可以通过将内容放在单独的html页面中来实现这一点 - 没有标题信息或正文，只有内容。

然后使用页面加载上的函数随机分配哪个div获取内容并使用它来更改DIV的内容：

<script type="text/javascript">
    function ajaxManager(){
        var args = ajaxManager.arguments;

        if (document.getElementById) {
            var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        }
        if (x){         
            switch (args[0]){
                case "load_page":
                    if (x)
                    {
                        x.onreadystatechange = function()
                        {
                            if (x.readyState == 4 && x.status == 200){
                                el = document.getElementById(args[2]);
                                el.innerHTML = x.responseText;
                            }
                        }
                        x.open("GET", args[1], true);
                        x.send(null);
                    }
                    break;

                case "random_content":
                    ajaxManager('load_page', args[1], args[2]); /* args[1] is the content page, args[2] is the id of the div you want to populate with it. */       
                    break;
            } //END SWITCH
        } //END if(x)
    } //END AjaxManager

</script>

任何在多个div元素中随机播放内容的方法

8 个答案: