Question

html：

<tr id="head-58">
    <td style="width:150px;">
        <input type="button" name="delete" class="delete_person" value="58" />name<button type="button" style="margin: 1px 35px 5px;" name="delete" value="58" class="delete_icon button_style">Delete</button>
    </td>
    <td>
        <input type="checkbox" name="first_aid" id="id_first_aid" />FirstAid
    </td>
    <td>
        <input type="checkbox" name="sick_bay" id="id_sick_bay" /Sick bay
    </td>
    <td>
        <input type="checkbox" name="ambulance" id="id_ambulance" />Ambulance
    </td>

</tr>

这里点击了delete_person类，我想用类delete_icon显示隐藏按钮。由于类delete_icon可以有多个，我需要显示隐藏按钮形式点击元素。我试过$this.closest('tr').find(".delete_icon").toggle();这是不工作

Answer 1

使用：

$this.parents('tr').find(".delete_icon").toggle();

Answer 2

除非您自己创建，否则没有$this变量。 this指的是事件的目标，所以在jQuery函数中使用它来创建一个包含它的jQuery对象：

$(this).closest('tr').find(".delete_icon").toggle();

但是，您还需要移动表格行内的按钮才能工作。现在它看起来像是在表格内，但在任何表格单元格之外，这是无效的HTML。（有些浏览器可能会将它放在某个表格单元格中，其他浏览器可能会将其完全移出表格。结果是不可预测的，因此除非您在单元格内移动按钮，否则无法编写访问它的代码。）

Answer 3

您的删除按钮不是tr的子项。将其移至tr，或使用：

$(this).closest('tr').next('.delete_icon')

Answer 4

由于该按钮位于<tr>...</tr>

之后

使用：

$(this).parent().next().toggle()

如何遍历元素

4 个答案: