Изменить размер отдельного динамически созданного ввода текста в keyup, который имеет несколько братьев и сестер с одним и тем же классом

Question

Любая помощь будет оценена по этому вопросу, пожалуйста. Я пытаюсь изменить размер динамически созданного ввода текста на клавиатуре. Я могу заставить это работать на базовом уровне, но у меня возникают проблемы при изменении размера отдельных входов, которые имеют один и тот же класс - т.е. вместо изменения размера только одного отдельного поля ввода, все текстовые входы с классом ".question" изменяют размеры.

Вот мой код:

function resizeInput(theInputField) {
  var getInputWidth = $(theInputField).width();
  if(getInputWidth < 400){
    $(theInputField).attr('size', $(theInputField).val().length);
  }
}

$('#question-list').on('keyup', '.question', function(){
  resizeInput('.question');
});

$ ('# question-list') -> Это элемент ul.

$ ('. question') -> Это динамически создаваемый ввод [type="text"] в вышеупомянутом ul.

Answer 1

В вашем обработчике событий, this это элемент, который вызвал событие. Вы могли бы сделать что-то вроде этого:

function resizeInput($theInputField) {      
  var inputWidth = $theInputField.width();
  if(inputWidth < 400){
    $theInputField.attr('size', $theInputField.val().length);
  }
}

$('#question-list').on('keyup', '.question', function(){
  resizeInput($(this));
});