jquery nth-выбор и 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

Вместо :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 2

Я думаю, что ваш селектор должен быть:

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

... например, вы ищете NTH li Это ребенок ul Это ребенок .portfolio. Отказ Это детские селекторы. Возможно, вместо этого вы можете использовать селектор потомки, но я думаю, что (предположение), что детские селекторы будут немного более эффективными, поскольку они имеют меньше поиска. (Конечно, они также будут более хрупкими, если вы измените свою структуру.)

Смотрите также пункт Патрика о тебе i<4 Сравнение, это, вероятно, от одного.

Answer 3

Я думаю, что вы хотите проверить, 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 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+")"

Если вы ищете выбрать элемент nth 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);