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组，即使在我看来它仍然应该遍历树到适当的父级字段集。

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

感谢您的帮助！

Answer 1

问题可能不在于parents方法，而在于next和prev方法。这些方法不循环（尝试the demo）。如果没有上一个元素，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()并检查下一个/上一个存在似乎可以解决问题..

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

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

2 个答案: