jquery nth-selecting and setInterval

Question

Hey all. Basically, I want the the next image to be clicked using jquery every second:

jQuery:

 var i=1;

 setInterval(function() {
  $(".portfolio :nth-child("+i+")").click();
  if (i<5) {i++;} else {i=1;}

 }, 1000);

HTML:

<div class="portfolio"> 
  <ul> 
   <li><img src="images/4.jpg" alt="4" id="promo_one"></li> 
   <li><img src="images/1.jpg" alt="1" id="promo_two"></li> 
   <li><img src="images/2.jpg" alt="2" id="promo_three"></li> 
   <li><img src="images/3.jpg" alt="3" id="promo_four"></li> 
  </ul> 
 </div> 

Thanks in advance :)

Answer 1

var i=1;

setInterval(function(){
   $('.portfolio').find('img[alt=' + i + ']').trigger('click');
   if(i < 4) i++; else i=1;
}, 1000);

By looking up the ALT attribute, this task has a better performance (like a lot). Makes only sense if the ALT attribute is always present of course.

Answer 2

Modify your javascript code like so:

var i=1;

setInterval(function() {
  $(".portfolio ul :nth-child("+i+")").click();

  if (i<5) {i++;} else {i=1;}

}, 1000);

In your example .portfolio does not have n Children, it has 1.

Answer 3

I think your selector should be:

$(".portfolio > ul > li:nth-child("+i+")").click();

...e.g., you're looking for the nth li that's a child of a ul that's a child of a .portfolio. Those are child selectors. You could probably use a descendant selector instead, but I think (supposition) that child selectors will be a bit more efficient as they have less searching to do. (Of course, they'll also be more brittle, if you change your structure.)

See also patrick's point about your i<4 comparision, it's probably off by one.

Answer 4

I think you're close(I'm not sure exactly what isn't working), but you may want to change your selector from:

".portfolio :nth-child("+i+")"

to:

".portfolio ul li:nth-child("+i+")"

if you are looking to select the nth li element. I'm not sure what else is wrong with the code, please expand on your question if this doesn't solve your problem.

Answer 5

I think you want to check if i is less than 4 since you have 4 links.

if (i<4) {i++;} else {i=1;}

Since :nth-child is a 1 based index, and 4 is less than 5, when you get to 4, it is being increment to 5, but there is no :nth-child(5).

As others noted, you want to specify the :nth-child on the correct element as well.

Example: http://jsfiddle.net/JBt6b/

Answer 6

I would precompute many of the items and use modular arithmetic to rotate through the images.

var images = $('.portfolio img').;
var count = images.length;
var lastClicked = count - 1;

setInterval( function() {
    var next = ++lastClicked % count;
    images.eq(next).click();
}, 1000);

Answer 7

Instead of :nth-child() you can use .eq() here, like this:

var i=1;
setInterval(function() {
  $(".portfolio ul li img").eq(i).click();
  i = i==3 ? 0 : i + 1;
}, 1000);

Your selector should also go down to the <img> (or leave out the img part if you want to click the <li>), otherwise you're clicking other elements as well. This gets all images, and grabs the one at the index you want using .eq(index) so you can .click() it.