任何方式来洗牌多个div元素的内容 [英] Any way to shuffle content in multiple div elements

问题描述

我比较喜欢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。但这并不是真的使事情随机化。它只是让事情进入循环（这可能是确定）。

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

解决方案

您可以使用像 jQuery的？这里有一个快速的jQuery示例来完成你以后的工作。对HTML的唯一修改是添加一个容器元素，如下所示：

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

和javascript：

  function shuffle（e）{//将div传递给函数
 var replace = $（'< div>'）; 
 var size = e.size（）; 
 
 while（size> = 1）{
 var rand = Math.floor（Math.random（）* size）; 
 var temp = e.get（rand）; //从我们的集合中获取一个随机div 
 replace.append（temp）; //将所选的div添加到我们的新集合
 e = e.not（temp）; //从主集中删除我们选定的div 
 size--; 
} 
 $（'＃shuffle'）。html（replace.html（））; //更新我们的容器div与
 // new，randomized divs 
} 
 
 shuffle（$（'＃shuffle div'））; 
  

I'm relatively new to Javascript and was wondering if there's a quick way to shuffle content that is contained in multiple <div> tags. For example

<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>

After clicking on the button, I'd like the content in d1, d2, d3 to change places (for example maybe d3 would be first, then d1, then d2).

A quick way to kind of move things around is to copy the first div element (d1), then put it at the very end (after d3), and then delete the original d1. But that doesn't really randomize things. It just makes things go in the cycle (which might be ok).

Any suggestions would be appreciated. Thanks.

解决方案

are you ok with using a javascript library like jQuery? here's a quick jQuery example to accomplish what you're after. the only modification to your HTML is the addition of a container element as suggested:

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

and 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') );

这篇关于任何方式来洗牌多个div元素的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！