SO - 22625207

by Arun P Johny

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div style="width:500px;" class="siblings">
    <ul>ul (parent)  
        <li>li (sibling)</li>
        <li>li (sibling)</li>
        <li class="next">li (sibling with class name "next")</li>
        <li>li (the next sibling of li with class name "next")</li>
        <li>li (sibling)</li>
    </ul>   
</div>

CSS

.siblings * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
.next {
    background-color: red;
}

JavaScript

$('.siblings').on('click', '.next', function () {
    $(this).removeClass('next');
    alert('removed class');
    $(this).next().addClass('next');
})