title: How can i change content of <li> every x seconds from array?
body: <p>I want to make <strong><em>li</em></strong> list, where jQuery will every 2 second change content. Something like news from games.
  Problem is only at first cycle. At first cycle will skip second item in <strong>array</strong>. Second cycle and next are okay.</p>
  
  <p>Here is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
              var pages = ["&lt;li class='active'&gt;&lt;a href='#'&gt;Hello&lt;/a&gt;&lt;/li&gt;", "&lt;li class='active'&gt;&lt;a href='#'&gt;Hello2&lt;/a&gt;&lt;/li&gt;", "&lt;li class='active'&gt;&lt;a href='#'&gt;Hello3&lt;/a&gt;&lt;/li&gt;"]
   var index = 0;
      setInterval(function() {
          $("#ul_news").empty().append(pages[index]);
          index++;
          if (index &gt;= pages.length){
           index = 0;
          }
          setInterval(function(){
           $(".active").empty().append(pages[index]);
          }, 2000);
      }, 2000);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#ul_news{
   position: absolute;
   top: 0;
   left:100px;
   z-index: 20;
  }
  #ul_news li{
   z-index: 20;
   color: black;
   list-style: none;
   padding-bottom: 50px;
  }
  .non_active{
   z-index: -1000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="cs-cz"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Document&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width" /&gt;
   &lt;link rel="stylesheet" href="index.css"&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;ul id="ul_news"&gt;
    &lt;!--&lt;li class="active"&gt;aho j2&lt;/li&gt;
    &lt;li class="non_active1"&gt;ahoj3&lt;/li&gt;
    &lt;li class="non_active2"&gt;ahoj4&lt;/li&gt;
    &lt;li class="non_active3"&gt;ahoj5&lt;/li&gt;--&gt;
   &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>