考虑以下HTML片段:
<div class="input-group">
<div class="form-group">
<div class="controls">
Rank: <input class="form-control" name="myrank" id="myrank" type="number" value="1">
</div>
</div> <span class="input-group-addon">st</span>
</div>
这里我希望我的排名显示为第1,第2,第3,第4 &等等。所以我想根据#myrank
的值更新span.input-group-addon
的html。到目前为止,我能觉察到变化。获取如下值:
function ordinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}
$(function (){
$('input[type="number"]').on('input', function(e) {
var rank_ordinal = ordinal(this.value);
//how do I get to the sibling span from instance of 'this'?
// something like this $(this).parent().parent().parent().next()?
});
});
基本上,我正在寻找一个选择器来遍历DOM,所以我可以从this
得到span.input-group-addon
,因为页面可以有多个输入,所以我想更新用户进行更改的值。指针吗?
你可以通过
$('input[type="number"]').on('input', function(e) {
var rank_ordinal = ordinal(this.value);
var $span= $(this).closest('div.form-group').next('span.input-group-addon');
});
演示