CODEWITHSUNDEEP
javascriptjquery
Radical_Activity
Radical_Activity

Reputation: 2738

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

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?

Upvotes: 1

Views: 265

Answers (2)

helbins23
helbins23

Reputation: 101

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());
})

Upvotes: 1

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Related Questions