时间戳

首页 > 解决方案 > JQuery获取最接近所选元素的div

jquery - JQuery获取最接近所选元素的div

问题描述

我的 HTML 标记如下：

<div class="col-xs-6">
  <div class="form-group">
      <select id="select" class="form-control voip_destination_select">
      <option>Select</option>
      </select>
  </div>
</div>

<div class="col-xs-6 voip_destination_number2">
  <div class="form-group">
      text
  </div>
</div>

然后在 JQuery 中，我正在检查 select 元素中的更改，然后我想找到下一个带有类的 divvoip_destination_number2

$('.voip_destination_select').on('change', function() {
    $(this).closest('.voip_destination_number2').next('.voip_destination_number2')
});

更新的 HTML 选项

<div class="col-xs-6">
  <div class="form-group">
      <select id="select" class="form-control voip_destination_select">
      <option>Select</option>
      </select>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
      <div class="voip_destination_number2">
          text
     </div>
  </div>
</div>

标签： jqueryhtml

解决方案

你的逻辑很接近，但问题是因为.voip_destination_number2不是select引发事件的父级，所以closest()调用什么也不返回。

要解决此问题，您需要获取最近的父元素，它是 的兄弟.voip_destination_number2，在这种情况下col-xs-6，然后使用next()，如下所示：

$('.voip_destination_select').on('change', function() {
  $(this).closest('.col-xs-6').next('.voip_destination_number2').addClass('foo');
});
.foo { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
  <div class="form-group">
    <select id="select" class="form-control voip_destination_select">
      <option>Select</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

<div class="col-xs-6 voip_destination_number2">
  <div class="form-group">
    text
  </div>
</div>

推荐阅读