僅將代碼應用於 JQuery 中單擊元素的父級

Question

如何僅將代碼應用於 JQuery 中所選元素的父級而不是所有元素？

HTML

<div class="box">

    <div class="box-li">
        <div class="hide"></div>
        <div class="click">click</div>
    </div>

    <div class="box-li">
        <div class="hide"></div>
        <div class="click">click</div>
    </div>

</div>

查詢

$('.box-li .click').click(function(){
    $('.box-li .hide').fadeOut();
});

Answer 1

你可以使用.parent()從一個元素到它的父元素。 為此，您還需要使用this上下文 - 每個回調都將this分配給它當前是目標的元素。 您可以將它包裝在一個 jQuery 對象$(this) ，然后遍歷到父對象：

 $('.box-li .click').click(function(){ $(this).parent().fadeOut(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <div class="box-li"> <div class="hide"></div> <div class="click">click</div> </div> <div class="box-li"> <div class="hide"></div> <div class="click">click</div> </div> </div>