Question

下面有一些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();
    }
});

我不确定我在这里正确使用nearest（）方法，因为我已经读过它在DOM树上，而在这种情况下，我想要的元素低于它开始的元素。有什么方法可以实现这个目标吗？

下面生成的HTML是一个循环，因此会有很多实例，因此我不能只通过ID访问，因此我使用的原因是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>

Answer 1

what_is_the_quote_for是visit_status元素的父/祖先，因此您的代码无效。

您需要遍历form-group然后定位其下一个form-group兄弟，然后才能执行所需的操作。

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery显示最接近元素的祖父母不工作

1 个答案: