JQuery -找不到errorlist的祖先

我试图使我的表单组显示时，有一些错误后提交。这意味着表单组内部有<ul class="errorlist"...>。问题是我找不到这个错误列表的祖先，所以我可以"show()"它们。

正如你在下面看到的，首先，我找到了所有类为"errorlist"的元素，然后，我为每个元素找到了类为"main-form-wrapper"的祖先元素。但它的行为就像没有"main-form-wrapper"一样。

这是一个JQuery:

$(document).ready(function () {
        $('.main-form-wrapper').hide();
    
        var type_of_user = $('#id-type-of-user').data("type_of_user");
        var country = $('#id_country');
        refreshFormsVisibility(type_of_user, country);
        $('#id_type_of_user,#id_country').on('change', function () {
            refreshFormsVisibility(type_of_user, country);
    
        });
    
        $('h4').click(function () {
            $(this).siblings(".main-form-wrapper").first().slideToggle("slow");
        });
    
        var errors = $('.errorlist');
        $.each(errors, function (error) {
            alert($(error).closest('.main-form-wrapper').length); // returns 0
            $(error).closest('.main-form-wrapper').first().show();
        });
    });
    
    function refreshFormsVisibility(type_of_user, country) {
        $('.form-group-container').hide();
        if (type_of_user != '' && country.val() != '') {
            $('.show-allways').show();
            if (type_of_user == 'person') {
                $('.show-personal').show();
            } else {
                if (country.val() == 'SK') {
                    $('.show-company-sk').show();
                } else {
                    $('.show-company').show();
                }
            }
        } else {
    
        }
        //$(":input:not([type=hidden])").attr('disabled', false);
        //$('div > input:hidden').attr("disabled", true);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-contact-information" class="form-group-all form-group-container show-allways col-lg-12 top-margin-half" style="display: block;">
    
                    <h4 align="center" class="hand-cursor main-color">Contact information <i>(click to edit)</i></h4>
                    <hr>
                    <div class="main-form-wrapper" style="display: block;">
                        <div>
                            <div id="email-field-wrapper" class="fieldWrapper">
    
                                <label for="id_email">Email:</label>
                                 * 
                                <br>
                                <input id="id_email" maxlength="40" name="email" type="email" value="email@gmail.com">
                                <ul class="errorlist"><li>User with this email already exists</li></ul>
                            </div>
                            <div id="telephone-field-wrapper" class="fieldWrapper">
    
                                <label for="id_telephone">Telephone:</label>
                                
                                <br>
                                <input id="id_telephone" maxlength="50" name="telephone" type="text">
                                
                            </div>
                            <div id="fax-field-wrapper" class="fieldWrapper">
    
                                <label for="id_fax">Fax:</label>
                                
                                <br>
                                <input id="id_fax" maxlength="50" name="fax" type="text">
                                
                            </div>
    
                        </div>
                    <hr class="no-bottom-margin">
                    </div>
                </div>

你知道问题在哪里吗?它没有找到main-form-wrapper，所以我不能show()它