jQuery:如何在单击按钮时获得最接近的值?

时间:2009-12-09 23:04:30

标签: jquery traversal closest

我似乎无法使用此代码。 如何在单击按钮时获得最接近的.abc值?

定义最近

ie:如果你点击“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>

3 个答案:

答案 0 :(得分:3)

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

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

});

这是 Working Demo

答案 1 :(得分:2)

不久前,我写了一个插件,可能会对这种情况有所帮助:它叫做nextALL。

你会这样使用它:

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

答案 2 :(得分:0)

忽略您的html代码使用具有相同ID的多个元素格式不正确的事实,此javascript代码不会按照您的想法执行。参考http://docs.jquery.com/Traversing/closestclosest()从您所在的位置查找树。在您的任何按钮正上方的树中没有匹配.abc的元素。你要找的是邻居,而不是父母。

我会尝试这样的事情:

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

但它并不能解决您在特定按钮附近多个.abc的问题。

为什么不只是“正确”编写代码并让按钮直接引用使用ID和多个类的字段?