Question

如标题中所述，如果我有几个父项，我想将一个类添加到一个元素的父元素中。

为了更详细地解释我的意思，我将简要介绍一下初始情况。

标记：

<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＆＃34;框＆＃34;有一些内容，跨度和另一个div＆＃34; slide＆＃34;有一些内容和跨度。

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
}

让我们添加一些造型。 div现在有一个宽度，高度和位置加上滑动盒已经接收过渡以使孔的东西平滑。您可能已经知道旅程将在何处结束。

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

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

现在剩下的就是纯粹的日常生活。单击跨度添加/删除类.slided到.box。它很棒，每个人都很开心，除了我。因为如果我有更多这些盒子怎么办？当然，使用ID而不是类来使它们成为唯一也可以解决这个问题。但是如果我不知道我有多少人呢？这就是重点。

如何添加或删除类.slided以确定包含我点击的范围的div.box？

感谢您的帮助

编辑：我尝试过的代码

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

Answer 1

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

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

<强> Demo

请注意，我在滑块div中添加了一个负z-index，以防止它覆盖“更多”链接，使其无法访问。这可能不是一个可行的生产解决方案。

这是一个updated version，过渡正常。

Answer 2

您可以找到与您的选择器匹配的最近父母：

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

此代码现在将在box的上下文中找到其span父级。

如果有多个

2 个答案: