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

Question

as described in the title I would like to add a class to the parent element of one element if I have several of the parents.

To explain it in more detail what I mean, I'll give you a quick overview of the initial situation.

The markup:

<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>

As you see I've created a div "box" with some content, a span and also another div "slide" with some content and a span too.

The 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
}

Let's add a bit of styling. The divs now have a width, height and position plus the slide box has received a transition to make the hole thing smooth. You may already know where the journey will end.

So let's do it by bringing up a new player:

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

For now the rest is pure routine. Add/remove the class .slided to .box by clicking the span. It works fantastic and everyone is happy except me. Because what if I have more of these boxes? Of course using IDs instead of classes to make them unique will solve this too. But what if I don't know how many of them I'll have? And that's exactly the point.

How can I add or remove the class .slided to exact this div.box that contains the span I'm clicking on?

Thanks for your help

Edit: code I've tried

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

Answer 1

Use $(this) and closest() to traverse the DOM in a relative fashion:

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

Demo

Note that I've added a negative z-index to your slider div to prevent it from covering the 'more' link, rendering it inaccessible. This is probably not a viable production solution.

Here's an updated version with the transition working properly.

Answer 2

You can find your closest parent that matches your selector like this:

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

This code will now find its box parent in the context of the span that was clicked.