选择 HTML 元素 Jquery 之后的下一个 span 元素

Question

我正在尝试选择下一个span元素，其类名slider-value在选定的HTML元素之后。我已经尝试了多种解决方案，但没有一个有效。

我可以通过id来选择它，但我不希望这样做以使代码冗余。

$('.slider').change(function() {
var slider = this;
var output = $(this).closest('div').find('.slider-value').first();
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});

<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>

Answer 1

output

是一个jQuery对象，没有innerHTML属性。要更新元素的内容，请改用text()。html()也可以，但在这里不是必需的，因为您只是使用字符串值更新它。

在下面的示例中，请注意，我在变量名称上使用$前缀来表示它们包含 jQuery 对象。我还使用了input事件而不是change，以便立即更新值。

$('.slider').on('input', function() {
var $slider = $(this);
var $output = $slider.closest('div').find('.slider-value').first();
$output.text($slider.val());
}).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>

Answer 2

您可以使用siblings()+text()ORhtml()

执行以下操作

$('.slider').change(function() {
var slider = this;
var output = $(this).closest('div').find('.slider-value').first();

$(this).siblings('.slider-value').text(slider.value);
});

<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>