如何隐藏使用 jQuery 触发操作的父元素？

Question

我在 html 中有这段代码（注意外部和内部元素中的数字 1 和 2）：

<div class="list_item" id="item_1">
<div class="list_item_int">My first line</div>
<div class="eval_buttons">
    <div class="approve" id="1"></div>
    <div class="dismiss" id="1"></div>
</div>

<div class="list_item" id="item_2">
<div class="list_item_int">My second line</div>
<div class="eval_buttons">
    <div class="approve" id="2"></div>
    <div class="dismiss" id="2"></div>
</div>

然后我有这个脚本：

$().ready(function(){
    $(".approve").click(function(){
        $.post(
            "php/judge_work.php",
            {action : "1", work_info : this.id},
            function(data){
                $("#item_" + this.id).hide("slow");
            }
        );
    });
    $(".dismiss").click(function(){
        $.post(
            "php/judge_work.php",
            {action : "0", work_info : this.id},
            function(data){
                alert(data);
            }
        );
    });
});

有没有办法让 $("#item_" + this.id).hide("slow");工作？感谢您的友好回复。

Answer 1

您可以使用 .closest()，如下所示：

$(this).closest(".list_item") //gets the ancestor <div class="list_item">

在您的情况下由于 this 不会是 $.post() 回调中单击的元素，因此它看起来像这样：

$(".approve").click(function(){
   var li = $(this).closest(".list_item");
   $.post(
        "php/judge_work.php",
        {action : "1", work_info : this.id},
        function(data){
            li.hide("slow");
        }
   );
});