Jquery iterate through li a

[noober]

This is my setup:

 

<div class="item-list">
    <ul>
        <li class="first"><a href="/retailers# " id="Item1" class="Item1 inactive active">Item 1</a></li> 
        <li><a href="/retailers# " id="Item2" class="Item2 inactive">Item 2</a></li> 
        <li class="last"><a href="/retailers# " id="Item3" class="Item3 inactive">Item 3</a></li> 
    </ul>
</div>  
</div> 

 

My thoughts were to add the active class to the next anchor tag onclick, then remove the active class from the original element. My problem is that next apparently doesn't work, or I'm using it wrong. Using children and siblings don't seem to do anything either because I'm attempting to go through the classes in the li a, instead of the usual li tag itself. Any ideas of how I would iterate through without changing my html? Thanks.

 

I test out selecting the next element with the below, though it doesn't work.

 

$('.inactive.active').next('.inactive').css('border', '3px solid blue');

 

 

 

 

 

 

[.josh]

$('li a.inactive').click(function() {
   $(this).css('border','').removeClass('active');
   $(this).parent().next().find('.inactive').css('border', '3px solid blue').addClass('active');
});

 

 

[noober]

Thank you.