JavaScript/jQuery - 如何在页面加载时随机显示 html div 内容

Question

这是我在这里遇到的第一个问题，所以请耐心等待(也是编程新手)，我会尽力尽可能清楚地解释。基本上我想在每次加载页面时以随机顺序显示 div 内容，这个问题之前已经被问过，我已经找到了一些答案，但其中大多数对我来说相当复杂。但我找到了一个非常简单的答案(Random Div Order on Page Load) 我尝试过，但我不确定为什么它对我不起作用，可能它有点过时了？我粘贴下面的代码以便为您提供可视化效果，以下是 html 内容中需要随机化的 div:

 <div class="story-container">
  <div class="story">
    <a href="#"><img src="#" alt="some text"></a>
      <h4>Story Title</h4>
  </div>
  <div class="story">
    <a href="#"><img src="#" alt="some text"></a>
      <h4>Story Title</h4>
  </div>
</div>
<div class="story-container">
 <div class="story">
  <a href="#"><img src="#" alt="some text"></a>
    <h4>Story Title</h4>
 </div>
 <div class="story">
  <a href="#"><img src="#" alt="some text"></a>
    <h4>Story Title</h4>
</div>

我将来可能会添加更多“故事容器”类 div。

下面是我从上面提供的链接中给出的帖子中获得的脚本(我用我自己的类“故事”替换了目标类):

<script>
 var cards = $(".story");
 for (var i = 0; i < cards.length; i++) {
 var target1 = math.floor(math.random() * cards.lenth - 1) + 1;
 var target2 = math.floor(math.random() * cards.lenth - 1) + 1;
 cards.eq(target1).before(cards.eq(target2));
}
</script>

我尝试在同一 html 页面、标题以及正文部分的末尾使用此代码 javascript 代码。我还尝试将其保存在外部并从我的 html 页面中链接到它，但没有成功。

我的 jQuery 链接/版本如下:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3
/jquery.min.js"></script>

我在运行 js 脚本以随机化 div 之前导入此 jQuery 代码。不确定哪里出了问题，任何帮助将不胜感激，提前非常感谢大家!

[进展]

非常感谢你们的及时回复和详细指导，@Hill @fermats_last_nerve @jritchey @Quiver，虽然您修复了代码，但它仍然无法在我的浏览器中工作，这真的很奇怪，因为它在 jsfiddle 中完美工作， codepen 和 plunkr。如果它可以在在线工具中运行，它也应该在我的浏览器中运行。

我使用 WAMP 作为服务器来在 Windows 10 上测试我的 php 页面，我通常使用 Firefox 浏览器，但我也在 Microsoft Edge 上测试了此代码，但没有什么乐趣。再次感谢您花时间帮助我解决此问题。

Answer 1

我在 this codepen 中调试了你的代码。基本上你有 3 个错误

1. 您对 target1 和 target2 的定义中有拼写错误cards.lenth 应该是 cards.length

2. 变量 cards: var cards = $(".article") 正在选择具有“article”类的所有元素，但您没有任何具有该类的元素，我假设你的意思是 var cards = $(".story")

3. 使用时请确保 Math 大写。

   (编辑)看起来有人编辑了您的帖子，以便在选择器中拥有正确的类，因此根据新编辑的问题，#2 不再有意义，但我会保留它，以防您没有注意到任何编辑原因。