使用 jquery 获取下一个 html 元素自定义属性

Question

我有html：

<div>
   <label>Select1</label>
   <select class="selectme" data-field-name="select1">
     <option selected>Select Me</option>
   </select>
</div>
<div>
   <label>Select2</label>
   <select class="selectme" data-field-name="select2">
     <option selected>Select Me</option>
   </select>
</div>

我想获取此自定义属性（data-field-name），然后在每个更改事件上进行选择。我可以得到这个选择属性，但我不能得到下一个选择属性，我试着这样做，但它不起作用。我使用 jquery：

$('.selectme').on('change', function () {
    var selectOneName = $(this).attr("data-field-name");
    var selectTwoName = $(this).next('select').attr("data-field-name");
});

我该怎么做？谢谢！

Answer 1

问题是因为next() 用于检索兄弟元素，而select 不是兄弟元素。

要执行您需要的操作，您需要遍历 DOM 以找到您想要检索的内容。一种方法是使用closest() 获取父级div，然后使用next() 和find()，如下所示：

$('.selectme').on('change', e => {
  let $select = $(e.target);
  var fieldName = $select.data('field-name');
  console.log(fieldName);

  var $nextSelect = $select.closest('div').next().find('select');
  let nextFieldName = $nextSelect.data('field-name');
  console.log(nextFieldName);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
  <label>Select1</label>
  <select class="selectme" data-field-name="select1">
    <option selected>Foo</option>
    <option>Bar</option>
  </select>
</div>
<div>
  <label>Select2</label>
  <select class="selectme" data-field-name="select2">
    <option selected>Foo</option>
    <option>Bar</option>
  </select>
</div>

请注意，作为上述示例的一部分，我已更正了您的 HTML 中的问题。我认为它们只是将代码转换为您的问题引起的错误。