Question

我有以下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);
  });

但没有任何运气。

Answer 1

如果你看documentation for closest，你会发现它说它找到了祖先..

说明：获取第一个祖先与选择器匹配的元素，从当前元素开始通过DOM树推进 up 。

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

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

所以

var val = $(this).closest('tr').find('input').val();

Answer 2

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

正确的代码是：

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

我不建议将事件处理程序绑定到alllllllll锚标记;如果页面上有许多元素，这将是低效的。相反，我会强烈建议改为使用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（一次），然后使用JavaScripts事件冒泡机制来检测与第一个参数中传递的选择器匹配的元素上的单击（在本例中为删除按钮））。

Answer 3

尝试

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

Answer 4

See Working Demo

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

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

parent()用于返回链接的父td，然后使用prev()查找td的上一个兄弟，最后使用{{1} }}方法，搜索find。

更多信息：

选择特定的最近元素

4 个答案:

See Working Demo