jquery - jQuery在循环中将css类分配给div

Question

我这里有这些html结构，

<div class="myCaption">
 <h2>caption 1</h2>
 <h2>caption 2</h2>
 <h2>caption 3</h2>
 <h2>caption 4</h2>
 <h2>caption 5</h2>
</div>

我想知道如何使用 jquery 将“活动”类添加到第一个H2标记，然后每隔例如2 秒，将“活动”类从第一个H2标记切换到第二个H2标记，然后切换到第三个。 ...当到达最后一个 H2 标签时，它将再次无限循环到第一个H2。请指教。谢谢。

Answer 1

您需要使用setInterval来启动处理您的更改的计时器。 这是一个工作小提琴

$(function(){ 
    //get all of the h2 tags.
    var h2s = $('.myCaption h2');

    //set up a counter
    var counter = 0;

    //start the interval
    setInterval(function(){

       //remove any active classes you have on the h2s.
       h2s.removeClass('active');

       // update the counter, use a modulo on it with the number of
       // h2 tags to find an index. Get the jquery object at that index, 
       // and add the class to that.
       h2s.eq(counter++ % h2s.length).addClass('active');

    }, 2000); //2000 milliseconds = 2 seconds.
});

编辑：谢谢@Christophe，我忘了eq().

Answer 2

$(document).ready(function() {
    'use strict';
    var activeCaption = 0,
        switchCaption = function switchCaption() {
            var captions = $('div.myCaption > h2'),
                count = captions.length - 1;
            captions.removeClass('active');
            captions.eq(activeCaption).addClass('active');
            if (activeCaption < count) {
                activeCaption += 1;
            } else {
                activeCaption = 0;
            }
            window.setTimeout(switchCaption, 2000);
        };
    switchCaption();

});​

工作演示：http: //jsfiddle.net/NPRzM/

Answer 3

您可能希望setTimeout在 while 循环中。您将在变量中保留一个索引，每次迭代您将删除活动类，增加索引，将活动类添加到新索引。冲洗，重复。当您的索引与 h2 标签的数量相同时，将其设置为零。

Answer 4

setInterval(function() {
        var current = $('div.myCaption > h2.active'),
            next = current.next().length?current.next():$('div.myCaption > h2').eq(0);
        current.removeClass('active');
        next.addClass('active');
    },2000);

演示：http: //jsfiddle.net/NPRzM/3/

[更新]缓存选择器的稍微高效的版本：

(function(h2s){
setInterval(function() {
    var current = h2s.filter('.active'),
        next = current.next().length?current.next():h2s.eq(0);
    current.removeClass('active');
    next.addClass('active');
},2000);
})($('div.myCaption > h2'));