jquery - jquery nth-selecting 和 setInterval

Question

大家好。基本上，我希望每秒使用 jquery 点击下一张图片：

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> 

提前致谢 ：）

Answer 1

我认为您的选择器应该是：

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

...例如，您正在寻找nth li that's a child of a ulthat's a child of a .portfolio。这些是子选择器。您可能可以改用后代选择器，但我认为（假设）子选择器会更有效率，因为它们要做的搜索更少。（当然，如果你改变你的结构，它们也会更脆。）

另请参阅patrick关于您的i<4比较的观点，它可能相差一个。

Answer 2

我认为您想检查是否i小于，4因为您有 4 个链接。

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

由于:nth-child是一个1基于索引，并且4小于5，当您到达 时4，它正在递增到5，但没有:nth-child(5)。

正如其他人指出的那样，您还想:nth-child在正确的元素上指定 。

示例：http: //jsfiddle.net/JBt6b/

Answer 3

而不是:nth-child()你可以.eq()在这里使用，像这样：

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

您的选择器还应该向下移动到（或者如果您想单击 ，请<img>忽略该部分），否则您也会单击其他元素。这将获取所有图像，并在您想要使用的索引处抓取一张，以便您可以使用它。img<li>.eq(index).click()

Answer 4

var i=1;

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

通过查找 ALT 属性，此任务具有更好的性能（如很多）。当然，只有始终存在 ALT 属性才有意义。

Answer 5

像这样修改你的javascript代码：

var i=1;

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

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

}, 1000);

在您的示例.portfolio中没有 n 个孩子，它有 1 个。

Answer 6

我认为您已经接近（我不确定到底是什么不起作用），但是您可能希望将选择器从以下位置更改：

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

到：

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

如果您要选择第 n 个 li 元素。我不确定代码还有什么问题，如果这不能解决您的问题，请扩展您的问题。

Answer 7

我会预先计算许多项目并使用模块化算法来旋转图像。

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

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