jquery - 访问最接近匹配标签的id

Question

我有一个选择。当我更改选择时，我需要访问 Canvas id。我现在有了这个代码。

我似乎从我的代码中得到了一个空对象(如您所见 here )，但我想获取字符串 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() 仅查看父元素。由于 Canvas 是父元素的同级元素，因此您需要使用 closest() 的组合来获取作为 Canvas 同级元素的最近父元素，.lastSelectedMenu code> 在本例中，然后是 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>