4

我有以下html：

  <table id="objects">
    <tr>
        <td>
            <input type="text" value="2" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" value="4" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>    
  </table>

当我单击锚标记时，我想选择<input>最接近我的链接，并获得它的价值。我怎样才能做到这一点 ？我在尝试：

  $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).closest('input').attr('value');
    alert(val);
  });

但没有任何运气。

4

4 回答 4

4

如果您查看最接近的文档，您会看到它说它找到了祖先..

描述：获取与选择器匹配的第一个祖先 元素，从当前元素开始，向上遍历 DOM 树。

您的输入不是.delete链接的祖先。

您需要向上移动，.closest('tr')然后向下钻取以找到输入.find('input')

所以

var val = $(this).closest('tr').find('input').val();
于 2010-11-01T11:00:35.187 回答
3

该closest函数的名称极具误导性：它实际上是返回的最近的祖先。

正确的代码是：

var value = $(this).parent().siblings('td').children('input').val();

我不建议将事件处理程序绑定到所有锚标记；如果页面上有许多这样的元素，这将是低效的。相反，我强烈建议使用delegate()或live()代替。

$('#objects').delegate('a.delete', 'click', function (e) {
    e.preventDefault();
    var val = $(this).parent('td').siblings('td').find('input').attr('value');
    alert(val);
});

这会将事件处理程序绑定到table（一次），然后使用 JavaScript 事件冒泡机制来检测与第一个参数中传递的选择器匹配的元素的点击（在这种情况下是您的删除按钮）。

于 2010-11-01T11:02:06.093 回答
0

尝试

$('.delete').click(function (e) {
    e.preventDefault();
    var val = $(this).parent("td").prev().find('input').val();
    alert(val);
});
于 2010-11-01T10:55:56.843 回答
0

见工作演示

你不能closest在那里使用，试试这个：

 $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).parent('td').prev('td').find('input').attr('value');
    alert(val);
 });

parent()用于返回链接的父级td，然后prev()用于查找之前的兄弟，td最后使用find方法input进行搜索。

更多信息：

于 2010-11-01T10:55:57.960 回答