一次显示容器中的随机div

Question

I want to do something like notification messages.

First I implemented an infinite loop, but this is not working perfect, so I just want to show every div of the container one time in a random order. When all divs of the container where shown, it should simply stop.

But I don't know, how the set something like a list, which should be process randomly and then stop.

Here is my CODE:

 var myVar; function showDiv() { var random = Math.floor(Math.random() * $('.notification').length); $('.notification').eq(random).prependTo('.container').animate({ opacity: 1, // animate slideUp marginLeft: '30px' }, '100', 'swing').delay(3000).fadeOut(400); createRandomInterval(); } function createRandomInterval() { setTimeout(showDiv, 500 + Math.random() * 4000); } $(document).ready(function() { createRandomInterval(); }); 

 .notification { width: 200px; height: 50px; background-color: yellow; border: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 5px; text-align: center; padding-top: 20px; opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="notification">1</div> <div class="notification">2</div> <div class="notification">3</div> <div class="notification">4</div> <div class="notification">5</div> <div class="notification">6</div> <div class="notification">7</div> <div class="notification">8</div> <div class="notification">9</div> <div class="notification">10</div> </div> 

Here is my fiddle: https://jsfiddle.net/brapbg1h/6/

Thank you so much!

Answer 1

I think this is what You're looking for:

Simply store your elements in an array and delete them from it once you've appended them

 var arr = $(".notification"); function display(){ let rand = Math.floor(Math.random() * arr.length) arr.eq(rand).prependTo("#result").animate({ opacity: 1, // animate slideUp marginLeft: '30px' }, '100', 'swing').delay(2000).fadeOut(400); arr = arr.not(":eq("+rand+")") if(arr.length>0) createRandomInterval(); } function createRandomInterval() { setTimeout(display, 500 + Math.random() * 4000); } createRandomInterval() 

 .notification { background-color: red; display: flex; justify-content: center; align-items: center; height: 50px; width: 200px; margin-bottom: 10px; opacity: 0 } .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hidden"> <div class="notification">object 1</div> <div class="notification">object 2</div> <div class="notification">object 3</div> <div class="notification">object 4</div> </div> <div id="result"></div> 

edit changed the snippet as requested by op

Answer 2

Maintain an array and then look for visited node

 for ( i in $('.notification') ) {
   if (arr.length ===  $('.notification').length) {
      console.log("all are shown")
    } else {  
        setInterval(showDiv, 500 + Math.random() * 4000);
    }
  }

Here is the modified example