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

我有HTML，看起来像这样：jQuery - 如何使用父母（）来访问1和2级别？

<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垂直选项卡窗格字段集，每个模块在底部的导航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; 
});

这完全适用于前两个字段集;点击'返回'和'下一个'将您切换到下一个字段集。但它不适用于第三组，尽管在我看来它仍然应该沿着树遍历适当的父母字段集。

我需要改变什么？如果这使得它更容易，我为第三个字段集提供了特殊功能$("#multistep-group-attendees .next-tab")。

感谢您的帮助！

来源

2011-05-12 Eileen

您是否尝试过最接近方法 - http://api.jquery.com/closest/？ – gutierrezalex 2011-05-12 20:26:52

只是做一个直接交换（“父母”到“最接近”）根本没有任何导航工作。 – Eileen 2011-05-12 20:33:54

你可以发布一个[现场演示]（http://jsfiddle.net/），重现你的问题？ '最接近（）** **应**工作，我有点困惑，它没有。 – 2011-05-12 20:35:47

这个问题可能不是parents方法，而是next和prev之一。这些方法不会循环（尝试the demo）。如果没有以前的元素，prev将不会选择最后一个元素，并且next以同样的方式工作。

来源

2011-05-12 20:45:30

这部分应该没问题 - 还有其他代码[我试图简化发布]，只有当他们应该回退/下一次显示时：第一个选项卡上没有“返回”，最后一个选项卡上没有“下一个”。这些也只是许多标签中的3个（位于中间），所以它们都有next/prev标签。 – Eileen 2011-05-12 20:47:24

下面的代码应该这样做

$(".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/

来源

2011-05-12 20:56:05

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

回答

相关问题