Question

I am trying to use JQuery to iterate through a number of <li> objects using a timer, i.e. – for every 5 seconds, I would like to access the next <li> object of my <ul>.

I know you can iterate using the .each function, but I am having trouble with integrating the timer with it to iterate through each one individually.

I tried the following, but it was not working correctly. It kept giving me the last LI element. I am assuming it is because setTimeout is not sequential.

$("#div_image_thumb ul li").each(function(){    
  var myLIobj = $(this);
  setTimeout(function(){doThis(myLIobj);}, 5000);
});

Answer 1

John Fishers approach looks good. But if you want to stick with jQuery’s each, which is quite elegant, try this (based on JasonWoof’s hint to set timeouts to 5s, 10s etc.):

$("#div_image_thumb ul li").each(function (i) {
    var $li = $(this);
    setTimeout(function () { doThis($li); }, 5000 * (i + 1));
});