Как скрыть родительский элемент элемента, который вызвал действие с помощью 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 ("медленный"); Работа? спасибо за ваш добрый ответ.

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");
        }
   );
});