在单击li上添加类并从兄弟姐妹中删除类

Question

单击"我想将类添加到锚标记"，并从所有同级中删除该类。但是，我当前的代码似乎并没有从其他元素中删除该类，即使它似乎确实在单击时添加了该类。

这是我的代码：

$("ul li").each(function(){
    $(this).click(function(){
       $(this).children().addClass('cell-selected').siblings().removeClass('cell-selected');
    });
});

.cell-selected { color: #fff; background: #5b2200; border-color: #ce5209; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a class="cell">Plan 1.1</a></li>
    <li><a class="cell">Plan 1.2</a></li>
    <li><a class="cell">Plan 1.3</a></li>
</ul>
<ul>
    <li><a class="cell">Plan 2.1</a></li>
    <li><a class="cell">Plan 2.2</a></li>
    <li><a class="cell">Plan 2.3</a></li>
</ul>

上传于 http://jsfiddle.net/9wky66ju/24/

Answer 1

jsFiddle Demo

您可以使用.parent()返回同级，但随后您需要选择类cell-selected以便从这些元素中删除该类。

$("ul li").click(function(){ // don't need each (click does this internally)
 $(this).children().addClass('cell-selected') //add cell-selected class to a
 .parent() //go back to li
 .siblings() //look at siblings
 .find('.cell-selected') //find cell-selected elements
 .removeClass('cell-selected'); //remove the class
});

Answer 2

非常好 @travis J - 我自己需要这个。

我添加了更多内容，以防有人也想针对 li 元素，就像我也想要的那样。

$("ul li").click(function(){
 $(this).children().addClass('cell-selected')
 .parent().addClass('active').siblings().find('.cell-selected').removeClass('cell-selected')
 .parent().removeClass('active');
});

JS小提琴在这里