如何使用jQuery选中目标HTML元素后的.slider-value类span元素？

看起来你遇到的核心问题是jQuery对象和原生DOM元素的操作方法混用，以及事件绑定逻辑的小问题，下面一步步帮你解决：

问题诊断 #

1. 你用$(this).closest('div').find('.slider-value').first()其实是可以正确定位到目标元素的，但错误在于你直接给jQuery对象用了原生的innerHTML属性——jQuery对象没有这个属性，得用它的专属方法（比如.text()）。
2. 另外，你在change事件回调里重复绑定oninput事件，这会导致每次触发change都给滑块加一次oninput监听，可能造成重复执行的问题。

修正后的解决方案 #

方案1：用更简洁的同级元素选择器（推荐） #

既然.slider和.slider-value是同级元素，直接用siblings方法定位更高效：

// 等待DOM加载完成后执行
$(function() {
  // 同时绑定input和change事件，覆盖拖动实时更新+松开触发的场景
  $('.slider').on('input change', function() {
    // 找到当前滑块对应的.slider-value
    const targetOutput = $(this).siblings('.slider-value').first();
    // 用jQuery的.text()方法设置内容
    targetOutput.text(this.value);
  });
  
  // 初始化显示默认值
  $('.slider').trigger('input');
});

方案2：保留closest+find的写法（修正innerHTML问题） #

如果坚持用closest+find，只需要把jQuery对象转成原生DOM元素，或者改用jQuery的方法：

$(function() {
  $('.slider').on('input change', function() {
    const slider = this;
    const targetOutput = $(this).closest('div').find('.slider-value').first();
    
    // 方法A：转成原生DOM元素使用innerHTML
    targetOutput[0].innerHTML = slider.value;
    
    // 方法B：用jQuery的.text()方法（更推荐）
    // targetOutput.text(slider.value);
  });
  
  $('.slider').trigger('input');
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <span class="slider-text">Total Monthly Income</span>
  <input type="range" min="1" max="100" value="50" class="slider" id="salary">
  <span class="slider-value"></span>
</div>

<script>
$(function() {
  $('.slider').on('input change', function() {
    $(this).siblings('.slider-value').first().text(this.value);
  });
  $('.slider').trigger('input');
});
</script>

几个关键注意点 #

• 永远记得区分jQuery对象和原生DOM元素：jQuery对象要用.text()/.html()，原生元素用innerHTML，不要混用；
• 用$(function(){})包裹代码，确保DOM完全加载后再执行事件绑定，避免找不到元素；
• 合并input和change事件，既实现拖动滑块时实时更新，也支持点击滑块触发更新；
• 初始化时触发一次input事件，让页面加载就显示滑块的默认值。

内容的提问来源于stack exchange，提问作者Arun Laxman