当有多个元素时，如何将 class 添加到 parent 元素

Question

如标题中所述，如果我有多个 parent，我想在一个元素的 parent 元素中添加一个 class。

为了更详细地解释我的意思，我将快速概述一下初始情况。

标记：

<div class="box">
    <h3>Title</h3>
    <p>Some text</p>
    <span class="iconfont more"></span>
    <div class="slide">
        <p>some more text</p>
        <span class="iconfont close"></span>
    </div>
</div>

如您所见，我创建了一个包含一些内容和跨度的 div "box" 以及包含一些内容和跨度的另一个 div "slide"。

CSS:

.box {
    width: 300px;
    height: 500px;
    position: relative;
}

.slide {
    width: 300px;
    height: 500px;
    position: absolute;
    top: -500px;
    left: 0;
    transition: all 500 ease-in-out
}

让我们添加一些样式。 divs 现在有一个宽度、高度和位置，加上滑动框已经收到一个过渡，使孔的东西变得平滑。您可能已经知道旅程的终点。

所以让我们通过培养新玩家来做到这一点：

.box.slided .slide {
    top: 0;
}

现在剩下的就是例行公事了。 Add/remove class .slided to .box 点击跨度。它工作得很好，除了我之外每个人都很开心。因为如果我有更多这样的盒子怎么办？当然，使用 ID 而不是 classes 来使它们独一无二也可以解决这个问题。但是如果我不知道我会有多少呢？这正是重点。

如何添加或删除 class .slided 以精确包含我正在单击的跨度的 div.box？

感谢您的帮助

编辑：我试过的代码

$('div span').stop().click(function(event) {
    $('box').addClass('slided');
});

Answer 1

您可以像这样找到与您的选择器最接近的 parent：

$('div span').stop().click(function(event) {
    $(this).closest('.box').addClass('slided');
});

此代码现在将在被单击的 span 的上下文中找到它的 box parent。

Answer 2

使用$(this)和closest()以相对方式遍历DOM：

$('.more').click(function () {
    $(this).closest('.box').toggleClass('slid');
});

Demo

请注意，我已将负 z-index 添加到您的滑块 div 以防止它覆盖 'more' link，使其无法访问。这可能不是一个可行的生产解决方案。

这是一个 updated version 转换正常的效果。

当有多个元素时，如何将 class 添加到 parent 元素

How to add a class to parent element when there are several

javascript

jquery

addclass

removeclass