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/