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

Question

This is my first ever question here so please bear with me (also new to programming) I will try my best to explain as clearly as I can. Basically I want to show the div content in random order everytime the page is loaded, this question has already been asked before and I have come across some answers to this but most of them are quite complicated for me. But I found a very simple answer ( Random Div Order on Page Load ) that I tried but I am not sure why won't it work for me, may be it's a little outdated?. I am pasting the code below to visualise for you lot, here are the divs in the html content that need to be randomised:

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

I may add more 'story-container' class divs in the future.

Below is the script that I got from the post given in the link I provided above (I replaced the target class with my own class 'story'):

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

I have tried using this code javascript code within the same html page, in the header as well as at the end of body part. I also tried saving it externally and linked to it from within my html page but no luck.

My jQuery link/version is as follows:

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

I import this jQuery code before running the js script to randomise the divs. Not sure where things are going wrong, any help will be greatly appreciated, thank very much in advance guys!

[PROGRESS]

Thank you very much guys for your prompt replies and detailed guidance, @Hill @fermats_last_nerve @jritchey @Quiver, although you fixed the code but still it is not working in my browser which is really strange because it works perfectly in jsfiddle, codepen and plunkr. If it is working in online tools it should work in my browser as well.

I am using WAMP as a server to test my php pages on Windows 10, I normally use Firefox browser but I have test this code on Microsoft Edge as well but no joy. Thank you again for taking time to help me with this.

Answer 1

I debugged your code in this codepen . Basically you had 3 errors

1. There are typos in your definitions for target1 and target2 cards.lenth should be cards.length
2. The variable cards: var cards = $(".article") is selecting all elements with the class "article", but you don't have any elements with that class, I assume you mean var cards = $(".story")

3. Make sure you capitalize Math when you use it.

   (EDIT) Looks like someone edited your post to have the correct class in the selector so #2 no longer makes sense in light of the new edited question but I'll leave it in case you do not notice the edit for whatever reason.

Answer 2

I've noticed a few typos in your code. Replace your jQuery with the code below and it should work as it does in this jsfiddle .

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