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小提琴... 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"，当你寻找$(".main").children()时，它应该是“主要”。
您用于多个元素的ID "#box"

在你的小提琴中，你也忘了导入jQuery。

Demonstration（点击“使用JS运行”）

Answer 2

首先，如前所述，ID应该是唯一的，并且它们不以＃开头。 id的选择器使用＃。

对于类，它们应该以字母开头，只有选择器使用点。

现在为你的小提琴。你可以在这里明显地使用jQuery，所以在你的小提琴上包含jQuery，在左边的菜单中。

然后，你在小提琴中所做的是定义一个函数，但你从不称它为函数。只需在代码末尾添加对函数的调用（jsFiddle将在加载文档时调用，如下所示：

reorder();

在你的小提琴上为我工作。

随机化div id顺序

2 个答案: