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

单击li上的Addclass并从兄弟姐妹中删除类

2 个答案: