根据bootstrap 3中的输入值对input-group-addon进行排序

ordinalize input-group-addon based on input value in bootstrap 3

本文关键字：input-group-addon 排序 输入 bootstrap 根据      更新时间：2023-09-26

考虑以下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');
  });
演示

相关文章：