使用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>一個）。