Блог

У меня есть некоторый HTML ниже (сгенерированный с использованием CakePHP):

Я пытаюсь показать элемент прародителя ближайшего элемента, на который был нажат:

 $('.what_is_the_quote_for').closest('.form-group').hide();

$('.visit_status').change(function() {
    if ($(this).val() == '2') {
        $(this).closest('.what_is_the_quote_for').parent().parent().show();
    }
});
  

Я не уверен, что правильно использую здесь метод closest(), поскольку я читал, что он поднимается по дереву DOM, тогда как в этом случае элемент, к которому я пытаюсь добраться, находится ниже элемента, с которого он начинается. Есть ли какой-нибудь способ добиться этого?

Сгенерированный ниже HTML находится в цикле, поэтому его будет много экземпляров, поэтому я не могу просто получить доступ по идентификатору, поэтому причина, по которой я использую this.closest()

 <div class="form-group">
    <label for="Visit0VisitStatus" class="col-md-4 control-label">Visit Status</label>
    <div class="col-md-8">
        <select name="data[Visit][0][visit_status]" class="visit_status select2-hidden-accessible" id="Visit0VisitStatus" tabindex="-1" aria-hidden="true">
            <option value="0">Complete</option>
            <option value="1">In Progress</option>
            <option value="2" selected="selected">First visit complete – quote to be submitted</option>
            <option value="3">First visit complete – parts required</option>
            <option value="4">Further visit required</option>
            <option value="5">Attended – passed back to Diamond</option>
            </select>
        <span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: auto;">
            <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-Visit0VisitStatus-container"><span class="select2-selection__rendered" id="select2-Visit0VisitStatus-container" title="First visit complete – quote to be submitted">First visit complete – quote to be submitted</span><span class="select2-selection__arrow" role="presentation"><b role="presentation">
            </b></span>
        </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
        </span>
    </div>
</div>



<div class="form-group" style="display: none;">
    <label for="Visit0WhatIsTheQuoteFor" class="col-md-4 control-label">What Is The Quote For</label>
    <div class="col-md-8">
        <textarea name="data[Visit][0][what_is_the_quote_for]" class="form-control what_is_the_quote_for" cols="30" rows="6" id="Visit0WhatIsTheQuoteFor"></textarea>
    </div>
</div>
  

what_is_the_quote_for является родительским / предком visit_status элемента, поэтому ваш код не работает.

Вам нужно пройти, чтобы form-group затем настроить таргетинг на его следующего form-group собрата, после чего можно выполнить желаемую операцию.

  $(this).closest('.form-group').next('.form-group').show()
  

 jQuery(function($) {
  $('.what_is_the_quote_for').closest('.form-group').hide();

  $('.visit_status').change(function() {
    if ($(this).val() == 2) {
      $(this).closest('.form-group').next('.form-group').show()
    }
  });
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Visit0VisitStatus" class="col-md-4 control-label">Visit Status</label>
  <div class="col-md-8">
    <select name="data[Visit][0][visit_status]" class="visit_status select2-hidden-accessible" id="Visit0VisitStatus" tabindex="-1" aria-hidden="true">
      <option value="0" selected>Complete</option>
      <option value="1">In Progress</option>
      <option value="2">First visit complete – quote to be submitted</option>
      <option value="3">First visit complete – parts required</option>
      <option value="4">Further visit required</option>
      <option value="5">Attended – passed back to Diamond</option>
    </select>
    <span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: auto;">
            <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-Visit0VisitStatus-container"><span class="select2-selection__rendered" id="select2-Visit0VisitStatus-container" title="First visit complete – quote to be submitted">First visit complete – quote to be submitted</span>
    <span class="select2-selection__arrow" role="presentation"><b role="presentation">
            </b>
      </span>
    </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
  </div>
</div>



<div class="form-group" style="display: none;">
  <label for="Visit0WhatIsTheQuoteFor" class="col-md-4 control-label">What Is The Quote For</label>
  <div class="col-md-8">
    <textarea name="data[Visit][0][what_is_the_quote_for]" class="form-control what_is_the_quote_for" cols="30" rows="6" id="Visit0WhatIsTheQuoteFor"></textarea>
  </div>
</div>