Problem with the next() function, not sure how to get around it!

Problem with the next() function, not sure how to get around it!

Hi Guys,

I am having a problem with the next() function. I am trying to point to the next <a href> element here but the next() function isn't working since I have an <li> in the way! How can I get around this?

Here is my code:
  1. <ul class="pagingthing">
                                <li>
                                    <a href="#" rel="1">1</a>
                                </li>
                                <li>
                                    <a href="#" rel="2">2</a>
                                </li>
                                <li>
                                    <a href="#" rel="3">3</a>
                                </li>
                                <li>
                                    <a href="#" rel="4">4</a>
                                </li>
                                <li>
                                    <a href="#" rel="5">5</a>
                                </li>
                            </ul>

















When the page loads, it gives the first <a href> tag the class "active" with this line:
  1. $("ul.pagingthing a:first").addClass("active");

So then we end up with this:

  1. <ul class="pagingthing">
                                <li>
                                    <a href="#"  class="active" rel="1">1</a>
                                </li>
                                <li>
                                    <a href="#" rel="2">2</a>
                                </li>
                                <li>
                                    <a href="#" rel="3">3</a>
                                </li>
                                <li>
                                    <a href="#" rel="4">4</a>
                                </li>
                                <li>
                                    <a href="#" rel="5">5</a>
                                </li>
                            </ul>















Mission accomplished!

Now I want this rotating function to be able to select the next <a href> tag after that one. I am trying to use the following line:
  1. $active = $('ul.pagingthing a.active').next();

Unfortuantely, that won't give me what I want because of the <li> elements!!! When I remove my <li> tags it works fine, but I need them there for design purposes!!


Any help would be appreciated, I am really stuck :(