在第一个位置显示最后一个fadeIn div

Question

我有10个div，它们是在随机时间显示的。 我该如何每次将最后一个显示的div设为顶部（排名第一），而不是按照div在HTML中的顺序？ 以下是我的代码：

var myVar;    
function showDiv(){
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).fadeIn(200).delay(3000).fadeOut(200);
  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;
  display: none;/* hide initially so that fadIn() fadeOut() will work
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

这是我的fiddle链接：https://jsfiddle.net/gkq21ppt/3/

编辑：解决方案的想法

一个解决方案可以是，将div包裹起来并设置它们为column-reverse。然后添加一个JS代码，为每个新淡入的div设置一个顺序号作为flex顺序号。 但是，由于我的JS技能很低，我不知道如何做到这一点。

所以循环可能看起来像：

1. 创建一个从1开始的数字作为变量
2. 创建类名为"order-[number]"的类宽度
3. 在".order-[number]"类中将css属性"order"设置为[number]
4. 在它淡入之前将此类添加到循环中
5. 在它淡出之后删除此类

或者？

- Referee Andy

Answer 1

你可以尝试使用.prependTo()

这将会做的事情（我认为）是移除活动通知并将其添加回容器中，位置在第一位。因此，不需要使用flexbox。

请注意，这将更改HTML结构。

更新的Fiddle

var myVar;

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  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;
  display: none;
  /* hide initially so that fadIn() fadeOut() will work */
}

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

- sol

---

乍一看似乎没问题。但是如果div-6被显示并且div-5淡入，它将不会放在顶部而是在div-6下面（这在列反转属性方面是合理的）。所以这是相同的，只是另一种方式。每个新淡入的div都应该放在顶部，无论在html中的div位置如何。 - Referee Andy

我再次考虑了一下。一个解决方案可能是，如果你将其设置为column-reverse并将顺序号作为flex order属性添加到每个fadedin div中。或者呢？ - Referee Andy

@RefereeAndy 我已经更新了我的答案。希望有所帮助。 - sol