Question

我有像下面这样的HTML代码

<div class="box box-default signup_box" id="signup_company">
            <div class="box-header with-border">
                <h4 class="box-title">Company Details</h4>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="form-group">
                    <label class="col-sm-3 control-label">Company Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control required" />
                    </div><!-- /.col -->
                    </div><!-- /.form-group -->
                </div><!-- /.row -->

                <div class="row">
                <section class="col-md-12">
                    <div class="box-footer">
                        <a href="javascript:void(0);" class="fusion-button button-flat fusion-button-pill button-large button-default button-1 pull-right" onclick="changeBoxDisplay('signup_financial');">Next</a>
                    </div><!-- /.box-footer -->
                </section><!--/ .col -->
                </div><!--/ .row -->
            </div><!-- /.box-body -->
            </div><!-- /.box -->

<div class="box box-default signup_box" id="signup_contact">
            <div class="box-header with-border">
                <h4 class="box-title">Contact Details</h4>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="form-group">
                    <label class="col-sm-3 control-label">Company Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control required" />
                    </div><!-- /.col -->
                    </div><!-- /.form-group -->
                </div><!-- /.row -->

                <div class="row">
                <section class="col-md-12">
                    <div class="box-footer">
                        <a href="javascript:void(0);" class="fusion-button button-flat fusion-button-pill button-large button-default button-1 pull-right" onclick="changeBoxDisplay('signup_financial');">Next</a>
                    </div><!-- /.box-footer -->
                </section><!--/ .col -->
                </div><!--/ .row -->
            </div><!-- /.box-body -->
            </div><!-- /.box -->

当按下下一个/后退按钮时，我正在调用一个函数，我想获取父级的ID .signup_box

我尝试了以下代码，但是返回div的id而不是父

$("#" + name).closesr('.signup_box').attr('id')

jQuery函数：

function changeBoxDisplay(name) {
    console.log( $("#" + name).find('.signup_box').attr('id') );
    var inputs = $("#" + current).find('.required');
    inputs.each(function() {
        //console.log($(this).val());
    });

    $(".signup_box").fadeOut();
    $("#" + name).fadeIn();
}

Answer 1

我没有做太多工作只是做了一个简单的小提琴https://jsfiddle.net/udr4zepm/

var parent = $('#companyName').closest('.signup_box').attr("id");

Answer 2

您始终可以使用onclick函数，该函数将获取与选择器匹配的所有父项的列表。我建议在触发事件的按钮中添加一个类，而不是使用$('a.next').on('click', function(){ var signupBox = $(this).parents('.signup_box').first(), signupBoxID = signupBox.attr('id'); ... });。在我的例子中，我使用“next”作为我的触发器类。

signupBox.next()

希望这有帮助！：）

编辑：我假设你正在按照向导的方式做点什么。一个额外的建议，显示下一个“框”使用signupBox.prev()来抓住下一个兄弟，{{1}}抓住前一个。

使用divs类获取父div

2 个答案: