Доступ к идентификатору ближайшего совпадающего тега

Question

У меня есть select. Мне нужно получить доступ к холсту id, когда я изменю свой выбор. У меня есть этот код сейчас.

Кажется, я получил пустой объект из своего кода (как вы можете видеть здесь ), но я хочу получить строку bw.

$("select[name='last']").on('change', function() {
  var selectedVal = $(this).val();
  console.log($(this).closest('canvas'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<small class="lastSelectedMenu">
  <span> 
    Current Interval:
    <span class="lastSelected"></span>
  </span>
  <select name="last" class="float-right">
      <option id="default" value="default">Select Interval</option>
      <option value="day">Day</option>
      <option value="week">Week</option>
      <option value="month">Month</option>
      <option value="year">Year</option>
  </select>
</small>
<canvas id="bw"></canvas>

Answer 1

closest() смотрит только на родительские элементы. Поскольку холст является родственным элементом родительского элемента, вам необходимо использовать комбинацию closest(), чтобы получить ближайший родительский элемент, который является родственным элементом холста, .lastSelectedMenu в данном случае, а затем next().

Это даст вам объект jQuery, содержащий ссылку на элемент canvas. Чтобы получить строку id, вы можете использовать prop(). Попробуйте это:

$("select[name='last']").on('change', function() {
  var selectedVal = $(this).val();
  var $canvas = $(this).closest('.lastSelectedMenu').next('canvas');

  console.log($canvas.prop('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<small class="lastSelectedMenu">
    <span>
      Current Interval:
      <span class="lastSelected"></span>
    </span>
    <select name="last" class="float-right">
        <option id="default" value="default">Select Interval</option>
        <option value="day">Day</option>
        <option value="week">Week</option>
        <option value="month">Month</option>
        <option value="year">Year</option>
    </select>
</small>

<canvas id="bw"></canvas>