Используя jquery, как лучше всего получить «следующее» текстовое поле с определенным именем класса

Question

У меня есть куча повторяющихся текстовых полей и списков на html-странице. Я хочу изменить значение текстового поля под списком при изменении ящика. Итак, у меня есть этот код:

$('.myDropdown').change(function () {
    var currentDropdownValue = $(this).val(); 
    if (currentDropdownValue == "Regular") {
         //CHANGE TEXTBOX BELOW THIS COMBOBOX WITH CLASS = "QUANTITY" TO 10.
    }
});

вот мой HTML

<select class="myDropdown">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>

<input class="quantity" type="text" />

По сути, мне нужно выяснить правильный синтаксис селектора, так как я использовал «Closest ()», но, похоже, он только поднимается вверх по дереву DOM, а не за текущим значением.

Answer 1

Вы можете попробовать next():

$('.myDropdown').change(function () {
    var currentDropdownValue = $(this).val(); 
    if (currentDropdownValue == "Regular") {
         //CHANGE TEXTBOX BELOW THIS COMBOBOX WITH CLASS = "QUANTITY" TO 10.
        $(this).next('.quantity').val('10');
    }
});

Возможно, вам придется немного покопаться в вашей HTML-структуре, если ваше поле ввода не совпадает с вашим раскрывающимся списком, например $(this).parent().next('.quantity').val('10').

Редактировать: вот вам jsFiddle .

Answer 2

Вы можете использовать .next () , чтобы вернуть следующий элемент или передать ему селектор, если вы более разборчивы.

$(this).next('.quantity').val(10);

Нет необходимости в дополнительном обходе DOM, например parent () или тому подобное.

Рабочая JSFiddle: http://jsfiddle.net/CXzVe/2/.

Answer 3

Если вы обновляете DOM после начальной загрузки страницы, вам нужно будет использовать $.live() или $.delegate(), потому что jQuery не знает об изменении.

JavaScript

$(".manufacturer").live("change", function () {
    var currentValue = $(this).val(); 
    if (currentValue && currentValue === "Regular") {
         $(".quantity").val("10");
    }
});

HTML

<select class="manufacturer">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>

<input class="quantity" type="text" />