Question

I am trying to simulate a click event on list items with the same class, one at a time every few seconds. I have tried this many different ways. Using combinations of .each and delay() result in all clicks being triggered at the same time. I found someone with a similar question and the answer was to do the following…

            var elements = $(this).find('.slide');
            var index = 0;

            setTimeout(function () {
                $(elements).get(index).trigger("click");
                index++;
            }, 3000);

This gives me a js error every time and doesn’t seem to fill the array…maybe I’m missing something obvious…

Thanks

Answer 1

jQuery.fn.delay() only works for animations made with jQuery, there is no way of delaying code using the jQuery core as of yet. There, however, are plugins implementing setTimeout() and the likes into jQuery, but they don’t add much functionality over the original setTimeout().

As for fixing your code 😉
jQuery.fn.get() gets the actual HTMLDomElement, and it has no method .click(). (I expect that is the error you are getting.)
Use jQuery.fn.eq() instead. Also, use setInterval() instead of setTimeout(), to make it work multiple times and then when all are “clicked”, clear the interval:

var interval = setInterval(function () {
  elements.eq(index).trigger("click");
  index++;
  if(index == elements.size()){
    clearTimeout(interval);
  }
}, 3000);