Question

我的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元素中的更改，然后我要从中查找类voip_destination_number2的下一个div

$('.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>

Answer 1

您的逻辑很接近，但是问题是因为.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>

Answer 2

首先，您必须通过.closest()遍历类为col-xs-6的div，然后通过.next()进入其同级，然后通过.find()向下遍历DOM 。像这样：

$('.voip_destination_select').on('change', function() {
    $(this).closest('div.col-xs-6').next().find('.voip_destination_number2')
});

jQuery获取最接近选定元素的div

2 个答案: