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);
精彩评论