Добавить класс в список элементов в последовательности

Question

На моем веб-сайте у меня есть группа/список разделов, каждая из которых будет содержать изображение. То, что я хочу сделать, - добавить класс в каждый div один за другим, последовательно. Как только он добавит класс в каждый div, тогда он завершается. Поэтому я не хочу, чтобы он зацикливался.

Вот общая настройка HTML:

<div class="row"> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
</div> 

Так к тому времени, Javascript изжил, то HTML будет выглядеть следующим образом:

<div class="row"> 
    <div class="image active"></div> 
    <div class="image active"></div> 
    <div class="image active"></div> 
</div> 

В настоящее время я с помощью JQuery на сайте , поэтому предпочтительнее использовать метод jQuery.

Спасибо!

// EDIT

Позвольте мне добавить еще некоторую информацию, так что то, что я пытаюсь выполнить больше смысла. Я знаю, как добавить класс, но я не хочу добавлять активный класс в каждый .image div сразу, это должно происходить по одному, так что между ними есть небольшая задержка ,

Если кому-то нужно больше разъяснений, я могу опубликовать анимированный .gif или что-то, чтобы лучше описать то, что я хочу, но, надеюсь, это поможет!

Еще раз спасибо!

Answer 1

Один из способов получить задержку является использование .each() и умножить индекс аргумент обратного вызова некоторых постоянная:

$(".row .image").each(function(i,el) { 
    var $this = $(this); 
    setTimeout(function() { 
      $this.addClass('active'); 
     }, i*1000); // milliseconds 
}); 

http://jsfiddle.net/mblase75/AvXMM/

---

Второй подход предполагает создание рекурсивной функции, которая выглядит для первого в .active элемента:

function looper() { 
    if ($('.row .image:not(".active")').first().addClass('active').length) { 
     setTimeout(looper, 1000); 
    }; 
}; 
looper(); 

http://jsfiddle.net/mblase75/qxEW7/

---

Вы также можете использовать setInterval, но этот подход означает, что первый элемент addClass будет отложен, а в abov Примеры е первый элемент имеет свой класс добавил сразу:

window.__interval = setInterval(function() { 
    if (!$('.row .image:not(".active")').first().addClass('active').length) { 
     clearInterval(window.__interval); 
    }; 
},1000); // milliseconds 

http://jsfiddle.net/mblase75/rgUJq/

Answer 2

Вы можете просто сделать это ..

$(".row > .image").addClass('active'); 

Поскольку вы изменили свой вопрос ... если вы захватить все изображения, то вы можете использовать setInterval, чтобы добавить задержку. Возможно, что-то вроде этого может быть тем, что вы ищете. Задержка здесь составляет 500 мс, очевидно, вы можете изменить это на все, что захотите.

var images = $(".row > .image"); 
var count = 0, length = images.length; 
var interval = setInterval(function(){ 
    if(count == length) 
     clearInterval(interval); 

    images.eq(count++).addClass('active'); 
}, 500) 

Answer 3

Вы можете использовать .each() цикл по каждому элементу, а затем использовать .addClass() добавить класс к этому элементу в петле.

$(".row .image").each(function(index) { 
    $(this).addClass("image_" + index); 
}); 

Answer 4

Используйте метод addCLass() из JQuery

$(".image").addClass("active"); 

Here's документация

Answer 5

Вы говорите, что "в последовательности", но не петли?

Это немного сбивает с толку, так что здесь два варианта:

Если вы не хотите петлю, затем $(".row .image").addClass("active");,

, если вы хотите его в последовательности, то $(".row .image").each($(this).addClass("active"));