jquery nth-selecting and setInterval

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=开发者_StackOverflow"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 :)

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.

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.

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/

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.

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.

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.

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);