120382833 120382833 - 5 months ago 20
jQuery Question

Javascript quotes loop - jump to the first after finishing

I am having problems with the script, because once all child elements are looped through I can't get back to the first element.

https://jsfiddle.net/pad5bp0o/2/



$(document).ready(function() {
var length = $("#tips li").length;
var old = 0;

function show() {
var news = getRan();
$("#tips li").hide();
$("#tips li:nth-child(" + news + ")").fadeIn("fast");
old++;
};

function getRan() {
var news = old + 1;
if (news < length) {
return news;
} else {
var news = 0 + 1;
return news;
old++;
}
};

show();
$("#something").html(length);
setInterval(show, 1000);

});

#tips,
#tips li {
margin: 0;
padding: 0;
list-style: none;
}

#tips {
width: 250px;
font-size: 16px;
line-height: 120%;
}

#tips li {
padding: 20px;
background: #e1e1e1;
display: none;
/* hide the items at first only */
}

.active {
opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="tips">
<li>... if you want to become a better coder you need to eat your vegetables?</li>
<li>... it takes more time to code a web page then to make a pizza?</li>
<li>... you should validate your code?</li>
<li>... jQuery is your friend? For real!</li>
<li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>
<div id="something"></div>




Answer

You need to reset old variable once you reach the last element.

function getRan() {
    var news = old + 1;
    if (news <= length) {
        return news;
    }

    news = 1;
    old = 0;
    return news;
};

DEMO