Блог

Рассмотрим следующий фрагмент 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-й и так далее. поэтому я хотел бы обновить span.input-group-addon html-код на основе значения из #myrank . пока я могу обнаружить изменение и получить значение следующим образом:

 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, чтобы я мог перейти к span.input-group-addon this нему, поскольку страница может иметь несколько входных данных, поэтому я хочу обновить значение, в котором пользователь внес изменения. какие-либо указатели?

Вы можете получить этот диапазон с помощью,

  $('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');
  });
  

ДЕМОНСТРАЦИЯ