4

这是我的代码:

<div class="container">
    <div class="prova">1</div>
    <div class="prova">2</div>
    <div class="prova">3</div>
</div>

我想每 500 毫秒获取每个 div 的内容。当我到达第三个位置时,回到第一个位置,依此类推。一个圆形next()

试过:

var primoElem = $('.prova').first();
setInterval(function () {
    console.log(primoElem.html());
    primoElem = primoElem.next();
}, 500);

但我只得到 3 个结果,然后它就停止了。

4

5 回答 5

7

当 jQuery 函数无法按您的意愿工作时,您可以随时根据需要更改它,方法是保存旧函数并覆盖它。或者,如果您不想更改 jquery 行为,也可以创建自己的函数。例如,对于覆盖,在 jquery load 之后将其添加到您的代码中:

$.fn.oldNext = $.fn.next;

$.fn.next = function(selector){
    var selector = selector || '';
    return this.oldNext(selector).length ? this.oldNext(selector) : this.siblings(selector).addBack(selector).first();
}

然后你的代码就可以工作了。

如果您不想覆盖,只需更改名称:

$.fn.loopNext = function(selector){
    var selector = selector || '';
    return this.next(selector).length ? this.next(selector) : this.siblings(selector).addBack(selector).first();
}

然后这样称呼它:

primoElem.loopNext();

小提琴:http: //jsfiddle.net/EcnSH/

于 2013-07-02T15:23:07.287 回答
5

你可以简单地这样做:

primoElem = primoElem.next();
if (!primoElem.length) primoElem = $('.prova').first();

有时,没有标准功能可以完全满足您的需求,但它是否仅意味着您的非常特定的需求已被额外的代码行覆盖,这并不重要。

于 2013-07-02T15:01:14.297 回答
1

只需运行检查:

setInterval(function () {
    console.log(primoElem.html());
    primoElem = primoElem.next().length ? primoElem.next() : $('.prova').first();
}, 500);
于 2013-07-02T15:02:18.570 回答
0

您还可以使用计数器:

var primoElemColl = $('.prova'),
    counter = 0;
setInterval(function () {
    var primoElem = primoElemColl.eq(counter++ % primoElemColl.length);
    console.log(primoElem.html());
}, 500);
于 2013-07-02T15:07:00.327 回答
0

没有“最后到达第一个”,但是,我倾向于为此使用索引:在这里,我向元素添加一个类,根据索引将其移动并返回到顶部。

var primoElem = $('.prova');
var provaIndex = 0;
var provaLastIndex = primoElem.length - 1
primoElem.eq(provaIndex).addClass('showmyprogress');
setInterval(function () {
    $('.showmyprogress').removeClass('showmyprogress');
    provaIndex = (provaIndex === provaLastIndex) ? 0 : provaIndex + 1;
    primoElem.eq(provaIndex).addClass('showmyprogress');
}, 500);

在行动中展示它:http: //jsfiddle.net/wb9V3/

于 2013-07-02T15:33:53.163 回答