(jQuery/Selectors) select element after a specified class

Question

i am trying to use the plugin infinite scroll

it requires the selector for the next page link. i suppose that if the navigation is as follows,

<ul>
    <li><a href="#" class="active">page 1</a></li>
    <li><a href="#" class="next">page 2</a></li>
    <li><a href="#">page 3</a></li>
    <li><a href="#">page 4</a></li>
    <li><a href="#">page 5</a></li>
</ul>

i can use "a.next" as the selector for the next page. but what happens if my page nav markup is as follows, without the .next class

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

how can i select the page 2 link assuming .active signifies the current page

Answer 1

To select the node next to .active, you can use the next() function:

$('.active').next();

But why not add a prev/next list item that's always there?

Answer 2

Hi,

I think you have to add a unique id to your <a> tags in order to be able to use the plugin.

Cheers,

Answer 3

Try

$('.active').parent().next().children().eq(0);

Answer 4

$("li:has(.active) + li a") will do the job. E.g.

alert($("li:has(.active) + li a").text());