将一个除法动态分配给一组元素

Question

我需要使用跨度id隐藏第1行和后3行，这是第1行的子级。

<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()。