顯示具有相同類名的下一個隱藏div

Question

我在mvc剃須刀中創建了一個隱藏的相似元素的數組

  <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();
            });
        });