jquery - 如何获取特定类的下一个所有元素？

Question

我正在触发一个事件，该元素具有类 .pvtd。在那之后我有更多具有相同类名的元素，所以我想对所有那些在该元素之后具有相同类名的元素执行一些功能。

在选择任何没有值(value)的选项时，我希望下一个 .pvtd 被禁用。不应禁用所选元素之前的前一个 .pvtd 类，而只能禁用下一个。知道我该怎么做吗？

$('.pvtd').on('change', function(event) {
  let value = $(`${this} option:selected`).val();
  if (!value) {
    $('.pvtd').nextAll().attr("disabled", "disabled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
  <label for="inputCity"><strong>Produce</strong></label>
  <select name="first" id="produce_rprt" class="pvtd">
    <option value="" selected="selected">Select Produce</option>
    <option value="1">Potato</option>
  </select>
</div>

<div class="form-group col-md-2">
  <label for="inputState"><strong>Variety</strong></label>
  <select name="variety" id="variety_rprt" class="pvtd">
    <option value="" selected="selected">Select Variety</option>
    <option value="1">Default</option>
  </select>
</div>

<div class="form-group col-md-2">
  <label for="inputState"><strong>Type</strong></label>
  <select name="type" id="type_rprt" class="pvtd">
    <option value="" selected="selected">Select Type</option>
    <option value="1">Default</option>
  </select>
</div>

<div class="form-group col-md-2">
  <label for="inputState"><strong>Defect</strong></label>
  <select name="defect" id="defect_rprt" class="pvtd">
    <option value="" selected="selected">Select Defect</option>
    <option value="1">Default</option>
  </select>
</div>

Answer 1

这里有两个问题。首先，this 是对引发事件的元素的引用。因此，您不能将它连接到 jQuery 选择器字符串。除此之外，您不需要这样做，因为所选选项的值可以通过执行 $(this).val() 简单地读取。

其次，nextAll() 在这种情况下不起作用，因为 .pvtd 不是兄弟。要解决此问题，您可以选择所有这些元素，然后在需要时，您可以找到所有那些索引比当前元素更高的元素。

但是，鉴于您的以下评论:

I want only type and defect to get disabled if I am selecting 'Select Variety'.

在这种情况下您不需要 nextAll()，因为您只需要.pvtd 元素之后的单个。为此，您可以使用 eq()，如下所示:

var $pvtd = $('.pvtd').on('change', function(event) {
  let value = $(this).val();
  if (!value) {
    $('.pvtd').eq($(this).index('.pvtd') + 1).prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
  <label for="inputCity"><strong>Produce</strong></label>
  <select name="first" id="produce_rprt" class="pvtd">
    <option value="" selected="selected">Select Produce</option>
    <option value="1">Potato</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="inputState"><strong>Variety</strong></label>
  <select name="variety" id="variety_rprt" class="pvtd">
    <option value="" selected="selected">Select Variety</option>
    <option value="1">Default</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="inputState"><strong>Type</strong></label>
  <select name="type" id="type_rprt" class="pvtd">
    <option value="" selected="selected">Select Type</option>
    <option value="1">Default</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="inputState"><strong>Defect</strong></label>
  <select name="defect" id="defect_rprt" class="pvtd">
    <option value="" selected="selected">Select Defect</option>
    <option value="1">Default</option>
  </select>
</div>