Выбор следующего поля ввода (jQuery)

Question

У меня есть слайдер пользовательского интерфейса jQuery. Все отлично работает, используя этот код:

Форма

<div class="ui-slide" id="test_div" min="1" max="20" inc="1"></div> 
<input readonly="readonly" name="padding" id="padding" type="text" value="5" /> 

Это код JavaScript, который я использую, чтобы получить значение текстового поля:

JS кодекса

$('div.ui-slide').each(function(i){ 

    if($(this).attr('min') != undefined && $(this).attr('max') != undefined) { 

     $(this).slider({ 
         min: parseInt($(this).attr('min')), 
         max: parseInt($(this).attr('max')), 
         value: parseInt($(this).next("input").val()), 
         step: parseInt($(this).attr('inc')) , 
         slide: function(event, ui) { 
          $(this).next("input").val(ui.value); 
         } 
        }); 

     $(this).removeAttr('min').removeAttr('max').removeAttr('inc'); 

    } 

}); 

выпуск:

Мне нужно разместить как ползунок, так и текстовое поле внутри стола, в частности, каждый из них имеет собственный «тд». Когда я это сделаю, я больше не могу извлекать значения текстового поля, используя вышеуказанный JS-код.

<table><tbody><tr> 
<td><div class="ui-slide" id="test_div" min="1" max="20" inc="1"></div></td> 
<td><input readonly="readonly" name="padding" id="padding" type="text" value="5" /></td> 
</tr></tbody></table> 

Инструменты разработки Chrome дают мне эту ошибку.

Uncaught TypeError: Cannot call method 'addClass' of undefined

Я понял, что он должен делать с этой строки кода:

value: parseInt($(this).next("input").val()), 

Я не уверен, хотя, как получить значение следующего «ввода», когда он находится внутри ячейки таблицы.

Answer 1

вместо перенапрягаешь next() найти правильный входной элемент в строке таблицы:

parseInt($(this).closest("tr").find('input[name="padding"]').val()), 

JQuery документы:

• http://api.jquery.com/closest/