重新排序div时重复div

Question

我试图弄清楚在我正在进行的项目中重新订购一些div的最简单方法。我创建了这个简单的测试：http://jsfiddle.net/Tt6uN/254/

＆＃13;

＆＃13;

$('.container > div').each(function() {
  $(".green").insertBefore(".red");
});

＆＃13;

div {
  height: 100px;
  width: 100px;
  marign: 10px 0;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="green"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，代码中有3个div元素。为什么在输出中生成第四个？也有人解决我的重新订购div问题。无论标记中red div的位置如何。它应该始终在green div

之后