jQuery - 如何使用parents（）来访问1级和2级？

Question

我有这样的HTML：

<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> 

所以：3个vertical-tabs-pane字段集，每个字段集的底部都有一个导航div。 但是第三组导航比其他导航嵌套了两层。

像这样的jQuery：

$(".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;
});

这适用于前两个场集; 点击“后退”和“下一步”将您切换到下一个字段集。 但它不适用于第3组，即使在我看来它仍然应该遍历树到适当的父级字段集。

我需要改变什么？ 如果使第三个字段集更容易，我可以使用特殊函数$("#multistep-group-attendees .next-tab") 。

谢谢你的帮助！

Answer 1

该问题可能不是与parents方法，但随着next和prev人。 这些方法不循环（尝试演示 ）。 如果没有先前的元素，则prev不会选择最后一个元素， next工作方式相同。

Answer 2

以下代码应该这样做

$(".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;
});

使用closest()并检查next / previous存在似乎可以解决问题。

演示 http://jsfiddle.net/gaby/VbgDg/