javascript - 随机化 div id 顺序

Question

我正在尝试获取一些带有 id 的 div 以随机化它们出现的顺序。我找到了一个脚本，据说可以执行此操作，但对于我的生活，我无法弄清楚为什么我的'工作。

基本上，当页面加载时，HTML 将如下所示:

<div class="main">
   <div id="box">1</div>
   <div id="box">2</div>
   <div id="box">3</div>
   <div id="box">4</div>
</div>

但是代码在应用时会随机化它们出现的顺序(在浏览器中)，如下所示:

<div class="main">
   <div id="box">3</div>
   <div id="box">1</div>
   <div id="box">4</div>
   <div id="box">2</div>
</div>

这里是据称使这一切正常运行的 javascript:

 function reorder() {
           var grp = $(".main").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".main").append($(grp));
       }

我以为这是因为我有一个 id 属性，但即使我把它去掉并把它做成一个普通的旧 div 标签，它也不起作用:/

这里是有问题的代码的 js fiddle 之类的东西...... js fiddle

这里有几个类似的问题，但都是老话题了，所以我希望没有人介意我做一个新的。我对 javascript 还是很陌生，如果这还不是很明显的话 :D

Answer 1

改变

<div class=".main">
   <div id="#box">1</div>
   <div id="#box">2</div>
   <div id="#box">3</div>
   <div id="#box">4</div>
</div>

到

<div class="main">
   <div >1</div>
   <div >2</div>
   <div >3</div>
   <div >4</div>
</div>

两个错误:

• 当您查找 $(".main").children() 时，".main" 应该是“main”。
• 您用于多个元素的 id "#box"

在您的 fiddle 中，您还忘记了导入 jQuery。

Demonstration (点击“使用 JS 运行”)