Question

我有一个简单的表格表格：

 <table>
 :
 <tr class="main" id="row1"><td><a href="#" class="showstuff">Assignment 1</a></td></tr>
 <tr class="detail hide"><td>... detail about Assignment 1...</td></tr>
 <tr class="main" id="row2"><td><a href="#" class="showstuff">Assignment 2</a></td></tr>
 <tr class="detail hide"><td>... detail about Assignment 2...</td></tr>
 :
 </table>

我想显示与点击的作业相关的细节，我理解这需要一些形式$（this）.parent（）。next（）来选择下一行。但是，我无法选择当前行。在尝试调试问题时，我尝试获取当前行的id，但只返回“undefined”。我的代码是：

$(document).ready(function(){
   $(document).on("click",'a.showstuff',function(){toggleDetail();return false;});
});
function toggleDetail(){
 var abc = $(this).parent().attr('id');
 console.log(abc)
};

我接近的洞在哪里？

感谢/ B

Answer 1

.parent()仅匹配直接父元素（即一级）。由于您将处理程序绑定到a元素（在td中进一步嵌套），因此您需要使用.closest()（这将“冒泡”整个DOM树，直到它的第一场比赛，而不是像：

$(this).closest('tr').attr('id');

阅读.closest()，.parent()上的文档，并查看.parents()

修改：

您的代码的第二个问题是，在处理程序内部调用toggleDetail()方法时，您将丢失事件处理程序的上下文。在处理程序中移动方法的内容：

$(document).on('click', 'a.showstuff', function(){ console.log($(this).closest('tr').attr('id')); return false; });

或传递元素：

$(document).on('click', 'a.showstuff', function(){ toggleDetail(this); return false; }); function toggleDetail(el){ console.log($(el).closest('tr').attr('id')); }

Answer 2

a代码的父元素是td，您没有给出任何id属性。所以，结果是undefined。您实际上已将id提供给tr元素，该元素是两级的。你应该真正做到以下几点：

$(this).parent().parent().attr('id');

如何选择表的行ID？

2 个答案: