javascript - 仅将代码应用于 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();
});

标签： javascriptjqueryhtmlclickparent-child

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>