开发者

Adding then removing a class to an achor element on a JavaScript timer

开发者 https://www.devze.com 2023-03-26 02:42 出处:网络
I would like to be able to cycle anchor selection using jQuery 1.4.4. The following works when targetting LI elements:

I would like to be able to cycle anchor selection using jQuery 1.4.4.

The following works when targetting LI elements:

HTML:

<ul class="rotating-banner">
    <li class="active"><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
</ul>

JavaScript (against jQu开发者_开发百科ery 1.4.4):

rotateBanner = function() {
    var active = $('ul.rotating-banner li.active');
    var next = active.next();
    if (next.length === 0) {
        next = $('ul.rotating-banner li:first');
    }

    active.removeClass('active');
    next.addClass('active');
}
setInterval(rotateBanner, 1000);

This can be seen here: http://jsfiddle.net/Carnotaurus2/Yq9AA/

However, as I said, I wish to target the nested anchor tags across all the LI elements in the UL element (there can only be one anchor tag in each LI element). So, for example, at the first tick interval, we have the first anchor tag selected:

<ul class="rotating-banner">
    <li><a class="active">1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
</ul>

Then at the next interval, we have the second selected:

<ul class="rotating-banner">
    <li><a>1</a></li>
    <li><a class="active">2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
</ul>

After the final selection, the first anchor tag is selected ad infinitum.


To get to anchor tags, I changed the selectors as such:

var active = $('ul.rotating-banner li a.active');
var next = active.parent().next().find('a');

Here a working fiddle (that cycles indefinitely): http://jsfiddle.net/Yq9AA/1/

I missed the ad infinitum part, updated my fiddle (this cycles only once): http://jsfiddle.net/Yq9AA/2/


Try this

rotateBanner = function() {
    var active = $('ul.rotating-banner a.active');
    var next = active.parent().next();
    if (next.length === 0) {
        next = $('ul.rotating-banner a:first');
    }
    else{
        next = next.find("a");
    }

    active.removeClass('active');
    next.addClass('active');
}
setInterval(rotateBanner, 1000);
0

精彩评论

暂无评论...
验证码 换一张
取 消