显示下一个具有相同类名的隐藏 div

Question

我在 mvc razor 中创建了一个隐藏的类似元素数组

  <button type="button" class="btn btn-primary addit" id="add"><i class="fa 
  fa-plus"></i> Add Branch</button>
 <div id="parnt">
    @for (int w = 0; w < 10; ++w)
       {
         ViewBag.Branch = "branchform" + w;

         <div class="col-md-6 formBranch" id="@ViewBag.Branch" hidden="hidden" >
            <div class="jarviswidget Widget_margin col-md-10" data-widget-
    editbutton="false" data-widget-colorbutton="false" data-widget-
 deletebutton="true" data-widget-fullscreenbutton="false">

                <header>
                    <div class="jarviswidget-ctrls" role="menu" id="deleteButton" onclick="Remove('@ViewBag.Branch')"><a href="javascript:void(0);" class="button-icon jarviswidget-delete-btn" rel="tooltip" title=""><i class="fa fa-times"></i></a></div>

                    @*<span class="widget-icon"> <i class="fa fa-arrows-v"></i> </span>*@
                    <h2 class="font-md">Branch <span id="branchTitle">@w</span></h2>
                </header>

                <!-- widget div-->
                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->

                    </div>
                    <!-- end widget edit box -->
                    <!-- widget content -->
                    <div class="widget-body form-horizontal" style="min-height:30px;">

                        <div class="form-group">
                            @Html.Label("Branch Type", new { @class = "col-md-2 control-label" })
                            <div class="col-md-9">
                                <select class="form-control" name="BranchId[]" id="BranchId1"><option>Head Office</option></select>
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.Label("Branch Name", htmlAttributes: new { @class = "col-md-2 control-label" })
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="Branch[]" id="Branch1" />
                            </div>

                        </div>

                        <div class="form-group">
                            @Html.Label("Address", htmlAttributes: new { @class = "col-md-2 control-label" })
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="Address[]" id="Address1" />
                            </div>

                        </div>

                        <div class="form-group">
                            @Html.Label("Address 2", htmlAttributes: new { @class = "col-md-2 control-label" })
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="Address2[]" id="Address21" />
                            </div>

                        </div>

                        <div class="form-group">
                            @Html.Label("City", new { @class = "col-md-2 control-label" })
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="City[]" id="City1" />
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.Label("State", new { @class = "col-md-2 control-label" })
                            <div class="col-md-9">
                                <select class="form-control" name="State[]" id="State1"><option>Lagos</option></select>
                            </div>
                        </div>

                    </div>


                </div>
            </div>
        </div>

    }
</div>

如何在 div 数组中显示下一个隐藏的 div。即，如果显示第一个 div，则在使用 jquery 单击按钮时显示下一个可用的隐藏 div。

我试过了……

    jQuery(document).on("click", ".addit", function (e) {
        e.preventDefault();

        $("#parnt").next('.formBranch').show();


    })

Answer 1

这是一个简单的解决方案，它查找与.formBranch 类匹配的第一个元素与hidden="hidden" 并显示它。

$(document).on("click", ".addit", function(e) {
  e.preventDefault();
  $("#parnt").children('.formBranch[hidden="hidden"]').first().attr("hidden", false);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parnt">
  <div class="formBranch" hidden="hidden">Hidden 1</div>
  <div class="formBranch" hidden="hidden">Hidden 2</div>
  <div class="formBranch" hidden="hidden">Hidden 3</div>
  <div class="formBranch" hidden="hidden">Hidden 4</div>
  <div class="formBranch" hidden="hidden">Hidden 5</div>
</div>
<button class="addit">Show it</button>

Answer 2

试试这个 jQuery 代码

jQuery(document).ready(function () {
            jQuery(document).on("click", ".addit", function (e) {
                jQuery(".formBranch:visible:last").next(".formBranch").show();
            });
        });