Get next html element custom attribute with jquery

Question

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

and i want to get custom attribute (data-field-name) of this and next select on every change event. I can get this select attr, but i can't get next select attr, i tryed to do, like this but it not works. I use jquery:

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

How i can do that? Thanks!

For your question, why not try to read on how `next` works? https://api.jquery.com/next/ — connexo, Dec 20 '21 at 18:29

score 2 · Answer 1 · edited Dec 20 '21 at 18:44

2

The issue is because next() is used to retrieve sibling elements, and the select are not siblings.

To do what you require you need to traverse the DOM to find the content you want to retrieve. One way to do this would be to use closest() to get the parent div, then next() and find(), something like this:

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

Note that I corrected the issues in your HTML as part of the above example. I assumed they were just errors caused by transposing the code in to your question.

edited Dec 20 '21 at 18:44

connexo

53,704
14
91
128

answered Dec 20 '21 at 18:31

Rory McCrossan

331,213
40
305
339

No point in using an arrow function here only to find yourself having to replace `this` with `e.target`. – connexo Dec 20 '21 at 18:33
Perhaps, but I'm now writing ES6 almost exclusively and just replace anon. functions where I see them – Rory McCrossan Dec 20 '21 at 18:34
Reconsider this way of proceeding then. Arrow functions were never meant to replace, but to complement regular functions; they mostly can and should be used when you want to either precisely bind `this` to whatever it is at the point of defining the arrow functions, or if the whole function has absolutely no use for `this` (which is not the case with event handlers). There's many places where you really don't want an arrow function. Also, the difference you introduced has nothing to do with anonymous functions. – connexo Dec 20 '21 at 18:42
Btw, is `data()` in jQuery safe if the preceding jQuery selector won't find an element? – connexo Dec 20 '21 at 18:42
`Btw, is data() in jQuery safe if the preceding jQuery selector won't find an element?` Of course, yep. – Rory McCrossan Dec 20 '21 at 18:45
https://stackoverflow.com/a/28135120/3744304 might be well-invested time for you. – connexo Dec 20 '21 at 18:51

Get next html element custom attribute with jquery

1 Answers1