как получить значение из текстового поля рядом с моим текстом

Question

У меня есть html-страница, где у меня есть таблица элементов (по одному элементу в строке), где каждый элемент является html-ссылкой с надписью «Добавить», и рядом с каждой ссылкой есть текстовое поле с номером в нем.

текстовая ссылка и текстовое поле находятся в одном и том же тд внутри строки таблицы.

как мне, используя jquery, получить значение из текстового поля, расположенного справа от ссылки, по которой я щелкаю.

Answer 1

Вы можете дать вашей ссылке класс, а затем сделать это:

$("a.myClass").click(function() {
  alert($(this).next().val());
});

Если у вас много ссылок или они динамически добавляются, измените его немного, чтобы использовать .live(), например:

$("a.myClass").live('click', function() {
  alert($(this).next().val());
});

Если вы хотите переместить текстовое поле, иметь промежуточный элемент и т. Д., Но это по-прежнему единственный вход в ячейку, вы можете изменить это: $(this).next().val() на что-то вроде этого:

$(this).closest('td').find(':text').val()

Answer 2

Я бы предложил использовать имена классов для удаления дизайна из функций. Основываясь на примере Ника Крейвера, вы полагаетесь, что дизайн не изменится. То есть изменение дизайна потребует изменения функциональности. Приведенный ниже пример будет работать в большинстве сценариев независимо от HTML.

<script type="text/javascript">
$(function() {  
    $(".row .rowClicker").click(function(){
        alert($(this).parents(".row").find(".rowVal").val());
    });
});
</script>

<div class="row" ><input class="rowVal" /> <a class="rowClicker">click</a></div>
<div class="row" ><input class="rowVal" /> <div id="newparent"><a class="rowClicker">click</a></div></div>
<div class="row" ><input class="rowVal" /> <a class="rowClicker">click</a></div>