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>

jquery traversal closest
person nolabel    schedule 09.12.2009    source источник
comment
Пожалуйста, определите ближайший.   -  person Jørn Schou-Rode    schedule 10.12.2009
comment
Пожалуйста, объясните проблему немного подробнее, прежде чем переходить к коду. Кроме того, не могли бы вы переопределить ближайший? Вы имели в виду шкафы?   -  person Nick Vaccaro    schedule 10.12.2009
comment
@Jorn Ближайший как в близком / близком. @Norla, в прошлый раз я проверял, что моя одежда все еще в шкафу. =] Я пытался использовать это выражение: docs.jquery.com/Traversing/closest   -  person nolabel    schedule 10.12.2009

Ответы (3)


arrow_upward
2
arrow_downward

Некоторое время назад я написал плагин, который может помочь в этой ситуации: Он называется nextALL.

Вы бы использовали это так:

$(":button").click(function() {
    $(this).prevALL("td:has(.abc)").eq(0).find(".abc").val();
});
person nickf    schedule 09.12.2009

arrow_upward
3
arrow_downward 

$('input.test').click(function() {

    $(this).parent()
           .prevAll('td:has(input.abc)')
           .find('input.abc:last')
           .val();

});

Вот рабочая демонстрация

person Russ Cam    schedule 09.12.2009
comment
Похоже, проблема в том, что A: и B: находятся в одной строке, поэтому нажатие этой тестовой кнопки всегда возвращает значение .abc, связанное с A: - person Mottie; 10.12.2009
comment
@fudgey, да, это решение было бы неплохо ... оно так близко, но так далеко. знак равно - person nolabel; 10.12.2009

arrow_upward
0
arrow_downward

Несмотря на то, что ваш html-код неправильно отформатирован с несколькими элементами, имеющими один и тот же идентификатор, этот код javascript не делает то, что вы думаете. Ссылаясь на http://docs.jquery.com/Traversing/closest, closest() ищет дерево, откуда вы находитесь. В дереве прямо над любой из ваших кнопок нет элемента, соответствующего .abc. То, что вы ищете, это сосед, а не родитель.

Я бы попробовал что-то вроде этого:

$(".test").click(function() {
  $(this).parent().parent().find(".abc").val();
});

но это не решает вашу проблему, когда несколько .abc рядом с определенной кнопкой.

Почему бы просто не написать код «правильно» и сделать так, чтобы кнопка напрямую ссылалась на поле, используя идентификаторы и несколько классов?

person Brandon Belvin    schedule 09.12.2009
comment
@ Брэндон, спасибо, что поймал несколько элементов с одним и тем же идентификатором. Я могу это исправить, но у вашего решения та же проблема, что и у Russ Cam. - person nolabel; 10.12.2009
comment
Пожалуйста, посмотрите обновление моего ответа, оно дает действительное и правильное решение. - person Russ Cam; 10.12.2009