使用jquery连接使用相同计数器的div

Question

我有一个表格，它使用PHP从数据库获取数据。

表包含父2种元素，可以说它们是：

Name Surname << table row id = info1 

Name Surname << table row id = info2 

下方的每一行，有其默认是隐藏的另一行。当单击名字时，这是我希望它显示的内容：

Name Surname << table row id = info1 
DOB  City  << table row id = infoSub1 

Name Surname << table row id = info2 
        << table row id = infoSub2 NOT DISPLAYED 

如何以最有效的方式实现此目的？

感谢

Answer 1

$("#info1").click(function() { 
    $(this).children("#infoSub1").slideDown(); 
}); 

然后做INFO2和infoSub2 :)相同

Answer 2

如果你可以给父行一类（例如parent），那么你可以让这个非常通用与.nextUntil() ：

$("tr.parent").click(function() { 
    $(this).nextUntil(".parent").toggle(); 
}); 

这只是选择所有<tr>元素不.parent点击行后，直到找到一个。这允许你中间有任意数量的非父行，并且它会正确地切换它们。如果你有一张长条桌，有很多行，以类似的方式使用.delegate()：

$("#tableID").delegate("tr.parent", "click", function() { 
    $(this).nextUntil(".parent").toggle(); 
}); 

此相同的行为，但会附加一个事件处理程序<table>（而不是每个父母<tr>一个）。