How to get the second closest element with the same class?

Question

I'm trying to get the closest select box's value each time I select something in either select boxes:

 $('.select').on('change', function(e) { console.log($(this).closest('.select').val()); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> </ul> <p>This is some text</p> <ul> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> </ul>

However, this is getting the current select box's value. Is it possible to get the closest select box, excluding the select box that's been changed?

Answer 1

You should first target the closest li then sibling li , finally find the element:

 $('.select').on('change', function(e) { console.log($(this).closest('li').siblings('li').find('.select').val()); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> </ul> <p>This is some text</p> <ul> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> <li> <select class="select"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </li> </ul>

Answer 2

You have to use .find(':selected') to find the closest select box

like this

$('.select').on('change', function(e) {
  console.log($(this).closest('.select').find(':selected').val());
})