動態的一組元素

Question

我需要隱藏的第一行，並使用跨度id，這將是第一排的孩子在未來3行的分配支隊

<tr> 
    <td> 
     <div><span id="id_1">Sample</span> 
     </div> 
    </td> 
</tr> 
<tr>row2</tr> 
<tr>row3</tr> 
<tr>row4</tr> 
<tr>row5</tr> 

當過你點擊樣本，需要隱藏第2行第3行和第4行以及父行。

我試圖使用$("#id_1").parent('tr').hide();來隱藏包含span但不工作的tr。

我該怎麼做。

Answer 1

試試這個，

$("#id_1").closest('tr').hide(); 
$("#id_1").closest('tr').nextAll('tr').hide(); 

Demo 1

或

$("#id_1").parents('tr').hide(); 
$("#id_1").parents('tr').nextAll('tr').hide(); 

Demo 2

您可以使用它像

$("#id_1").closest('table').find('tr').hide(); 

Demo 3

閱讀文檔的closest()和parents()和:not(:last)

Answer 2

我建議：

$('tr td span[id]').click(function(){ 
    var row = $(this).closest('tr'); 
    row.nextAll('tr').slice(0,3).add(row).hide(); 
}); 

JS Fiddle demo。

參考文獻：

• add()。
• closest()。
• hide()。
• nextAll()。