1

我有一个简单的表格：

 <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，但只是返回“未定义”。我的代码是：

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

我的方法的漏洞在哪里？

谢谢/B

4

2 回答 2

2

.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'));
}
于 2013-06-23T11:32:10.317 回答
0

atag的父元素是td您没有为其赋予任何id属性的元素。所以，结果是undefined。你实际上给id了tr两个级别的元素。您实际上应该执行以下操作：

$(this).parent().parent().attr('id');
于 2013-06-23T11:37:30.967 回答