jQuery的表演下一個父DIV

Question

我有以下的HTML標記：

<div id="step1" class="step"> 
        <h1>Enter code</h1> 
        <p><input type="text" value="<%= @groupCode %>" name="group_code" class="span3" /> 
         <a class="btn btn-primary btn-medium"> 
          Next &raquo; 
         </a> 
        </p> 
       </div> 
       <div id="step2" class="step" style="display: none"> 
        <p>Hello World</p> 
       </div> 

在點擊鏈接（.btn）我需要顯示下一個父DIV（#step2）。我將此設計爲一個註冊過程，因此將會有多個父div（均以步驟{：id}命名）

任何幫助都非常感謝！

Answer 1

您應該能夠使用類似：

//This should access the parent (step1), then the next element (step2) 
$(this).parent().next() 

Answer 2

jQuery('.btn').click(function(){ 
    jQuery(this).closest('.step').next().show(); 
}); 

Answer 3

$(function(){ 
    $(".step a.btn").click(function(){ 
    var item= $(this); 
    item.parent().parent().next().show(); 
    }); 
}); 

如果你想隱藏當前並顯示下一條具有一定褪色效果，你可以做到這一點

$(function(){ 
    $(".step a.btn").click(function(){ 
    var item= $(this); 
     item.parent().parent().fadeOut(400,function(){ 
     item.parent().parent().next(".step").fadeIn(300); 
     }); 
    }); 
}); 

這裏是一個例子：http://jsfiddle.net/Jm7fW/15/