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（全部命名为 step{:id}）。感谢任何帮助！

- dennismonsewicz

Answer 1

你应该可以使用以下代码：

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

- Rion Williams

Answer 2

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

- mprabhat

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/。

- Shyju