jQuery - How to use parents() to access both 1 and 2 levels up?

Question

I have HTML that looks like this:

<fieldset class="vertical-tabs-pane">
   <div class="vertical-tab-navigation">
       <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
       <a class="next-tab" title="Continue to next step" href="#">Next</a>
   </div>
</fieldset>

<fieldset class="vertical-tabs-pane">
   <div class="vertical-tab-navigation">
       <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
       <a class="next-tab" title="Continue to next step" href="#">Next</a>
   </div>
</fieldset>

<fieldset class="vertical-tabs-pane">
   <div>
      <fieldset id="multistep-group_attendees" class="group-attendees">
          <div class="vertical-tab-navigation">
            <a class="previous-tab" title="Go back to previous step" href="#">Back</a>
            <a class="next-tab" title="Continue to next step" href="#">Next</a>
          </div>
      </fieldset>
   </div>   
</fieldset> 

So: 3 vertical-tabs-pane fieldsets, each with a navigation div in the bottom. But the 3rd set of nav is nested two levels deeper than the rest.

jQuery like so:

$(".next-tab").click(function() {
    $(this).parents('fieldset.vertical-tabs-pane').hide().next('fieldset.vertical-tabs-pane').show();
    return false;
});

$(".previous-tab").click(function() {
    $(this).parents('fieldset.vertical-tabs-pane').hide().prev('fieldset.vertical-tabs-pane').show();
    return false;
});

This works perfectly for the first two fieldsets; clicking 'back' and 'next' swaps you over to the next fieldset. But it doesn't work for the 3rd set, even though it seems to me it should still traverse up the tree to the appropriate parental fieldset.

What do I need to change? I am fine with having special functions $("#multistep-group-attendees .next-tab") for the 3rd fieldset if that makes it easier.

Thanks for any assistance!

Answer 1

The problem may not be with the parents method, but with the next and prev ones. These methods do not cycle (try the demo ). If there's no previous element, prev won't select the last one, and next works the same way.

Answer 2

The following code should do it

$(".next-tab").click(function() {
    var current = $(this).closest('fieldset.vertical-tabs-pane');
    var next = current.next('fieldset.vertical-tabs-pane');
    if (! next.length ) next = current.siblings(':first');
    current.hide();
    next.show();
    return false;
});

$(".previous-tab").click(function() {
    var current = $(this).closest('fieldset.vertical-tabs-pane');
    var prev= current.prev('fieldset.vertical-tabs-pane');
    if (! prev.length ) prev = current.siblings(':last');
    current.hide();
    prev.show();
    return false;
});

Using closest() and checking for next/previous existence seems to do the trick..

demo http://jsfiddle.net/gaby/VbgDg/