title: Creating in an infinite loop using setTimeout
body: <p>I'm trying to figure out how I can restart my loop after reaches the last item of the list. Basically it passes the class <code>active</code> to the next sibling every 3s. How can I make it pass to the first item on the list once it reaches the last item. </p>
  
  <p>I was thinking maybe if I could have use <code>if/else</code> instead of <code>for</code> loop in my program</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
  
  
   function durationSlider() {
       var listItems = $('.loop ul li').length;
  
    for(count=0; count &lt;= listItems - 1; count++ ) {
           
              (function(count) {
                  setTimeout(function() {
       $('.loop ul li.active').removeClass('active');
       $('.loop ul li:eq(' + count +   ')').addClass('active'); 
       console.log(count);
                  }, 3000 * count);
              }(count));
    }  
   }
  
   durationSlider();
      
  
  })
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
   display: block;
  }
  body {
   line-height: 1;
  }
  ol, ul {
   list-style: none;
  }
  blockquote, q {
   quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
   content: '';
   content: none;
  }
  table {
   border-collapse: collapse;
   border-spacing: 0;
  }
  
  
  .loop ul li {
   color : green;
   -webkit-transition: color 1s linear;
  
  }
  
  .loop ul li.active {
   -webkit-transition: color 1s linear; 
      color : red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="loop"&gt;
      &lt;ul&gt;
          &lt;li class="active"&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>