How to hide divs one by one via javascript?

$(document).ready(function() {
    setInterval(function(){
        $('.div').hide();
        next();
    }, 1000);
});

.div {
  width: 300px;
  margin: 10px;
  padding: 10px;
  background: #567;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">Div 1</div>
<div class="div">Div 2</div>
<div class="div">Div 3</div>
<div class="div">Div 4</div>
<div class="div">Div 5</div>

function delayedHide(i,o) {
  setTimeout(
    function(){
      $(o).hide();
    },
    600 * (i + 1)
  );
}

$(function() {
  $('.hideme').each( delayedHide);
});

.hideme {
  width: 300px;
  margin: 10px;
  padding: 10px;
  background: #567;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideme">Div 1</div>
<div class="hideme">Div 2</div>
<div class="hideme">Div 3</div>
<div class="hideme">Div 4</div>
<div class="hideme">Div 5</div>