选择特定的最近元素
我有以下html:
link link
当我点击锚标记时,我想选择最接近我的链接的 ,并获得它的值。 我怎样才能做到这一点 ? 我在努力:
$('.delete').click(function(e){ e.preventDefault(); var val = $(this).closest('input').attr('value'); alert(val); });
但没有任何运气。
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事件冒泡机制来检测与第一个参数中传递的选择器匹配的元素上的单击(在本例中为删除按钮)。
如果您查看最接近的文档,您会看到它说它找到了祖先..
描述 :获取与选择器匹配的第一个祖先元素,从当前元素开始并逐步向上遍历DOM树。
您的案例中的输入不是.delete
链接的祖先。
您需要使用.closest('tr')
向上移动,然后向下钻取以查找带有.find('input')
所以
var val = $(this).closest('tr').find('input').val();
尝试
$('.delete').click(function (e) { e.preventDefault(); var val = $(this).parent("td").prev().find('input').val(); alert(val); });
请参阅工作演示
你不能在那里使用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
。
更多信息: