I am trying to create a li list using jQuery that will update every 2 seconds with new content, similar to game news updates. However, I'm encountering an issue during the first cycle where it skips the second item in the array. The subsequent cycles work as expected.
Below is my current code:
$(document).ready(function() {
var pages = ["<li class='active'><a href='#'>Hello</a></li>", "<li class='active'><a href='#'>Hello2</a></li>", "<li class='active'><a href='#'>Hello3</a></li>"]
var index = 0;
setInterval(function() {
$("#ul_news").empty().append(pages[index]);
index++;
if (index >= pages.length){
index = 0;
}
setInterval(function(){
$(".active").empty().append(pages[index]);
}, 2000);
}, 2000);
});#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;
}<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="UTF-8>
<title>Document</title>;
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<ul id="ul_news">
<!--<li class="active"><a href="#">ahoj2</li>
<li class="non_active1">ahoj3</li>
<li class="non_active2">ahoj4</li>
<li class="non_active3">ahoj5</li>-->
</ul>
</body>
</html>