jQuery: Как получить самое близкое значение, когда нажата кнопка?
Вопрос
Кажется, я не могу заставить этот код работать. Как получить ближайшее значение .ABC, когда кнопка нажата?
Определение ближайшего
т.е. если вы нажмете кнопку, где «A:» - это значение, я хочу значение 10. Если вы нажмете кнопку, указанную в «B:». Я хочу значение 20.
Вот код:
<script type="text/javascript">
$(function(){
$('.test').click(function(){
var value = $(this)
.parent()
.parent()
.closest(".abc")
.attr("value")
alert(value);
return false
});
});
</script>
<form name="myform">
<table>
<tr>
<td>A:</td>
<td><input type="text" class="abc" name="a" id="a" value="10" /></td>
<td><input type="text" name="vbn" id="vbn" /></td>
<td><input type="text" name="mkl" id="mkl" /></td>
<td><input type="button" class="test" name="test" id="test" value="test" /></td>
<td>B:</td>
<td><input type="text" class="abc" name="b" id="b" value="20" /></td>
<td><input type="text" name="ews" id="ews" /></td>
<td><input type="text" name="hrs" id="hrs" /></td>
<td><input type="text" name="ew3" id="ew3" /></td>
<td><input type="text" name="3ws" id="3ws" /></td>
<td><input type="button" class="test" name="test" id="test" value="test" /></td>
</tr>
<tr>
<td>C:</td>
<td><input type="text" class="abc" name="c" id="c" value="30" /></td>
<td><input type="text" name="oiu" id="oiu" /></td>
<td><input type="text" name="dfe" id="dfe" /></td>
<td><input type="button" class="test" name="test" id="test" value="test" /></td>
</tr>
<tr>
<td>D:</td>
<td><input type="text" class="abc" name="d" id="d" value="40" /></td>
<td><input type="button" class="test" name="test" id="test" value="test" /></td>
</tr>
</table>
</form>
Решение
Некоторое время назад я написал плагин, который может помочь в этой ситуации: он называется Nextall.
Вы бы использовали это так:
$(":button").click(function() {
$(this).prevALL("td:has(.abc)").eq(0).find(".abc").val();
});
Другие советы
$('input.test').click(function() {
$(this).parent()
.prevAll('td:has(input.abc)')
.find('input.abc:last')
.val();
});
Не обращая внимания на тот факт, что ваш HTML -код неправильно отформатирован с несколькими элементами, имеющими один и тот же идентификатор, этот код JavaScript не делает то, что, по вашему мнению, он делает. Ссылаясь на http://docs.jquery.com/traversing/closest, closest()
Взгляните на дерево от того места, где вы находитесь. Нет сопоставления элементов .abc
В дереве прямо над любой из ваших кнопок. Вы ищете сосед, а не родитель.
Я бы попробовал что -то вроде этого:
$(".test").click(function() {
$(this).parent().parent().find(".abc").val();
});
Но это не решает вашу проблему, где несколько. ABC рядом с конкретной кнопкой.
Почему бы просто не написать код «правильно» и иметь кнопку непосредственно обратиться к поле, используя идентификаторы и несколько классов?