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級別？

回答

相關問題