JQuery - 无法找到错误列表的祖先

Question

在提交后出现错误时，我试图让我的表单组显示。这意味着表单组内部有<ul class="errorlist"...>。问题是我找不到这个错误列表的祖先所以我可以＆＃34; show（）＆＃34;他们。

正如你在下面看到的，首先，我找到所有带有类＆＃34;错误列表＆＃34;的元素。然后，对于每个元素，我找到了类和＃34; main-form-wrapper＆＃34;的祖先。但它的作用就像没有＆＃34;主要形式包装＆＃34;在那里。

这是一个JQuery：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您应该使用$(this).closest()中的$each来访问当前的.errorlist对象。

$(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($(this).closest('.main-form-wrapper').length); // returns 0
    $(this).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>