jquery - 活动类同级 ​​removeClass

Question

我有各种各样的元素.folder

当我单击一个时，我想将类添加active到其中并从任何其他元素中删除该类。

问题是首先从其他类中删除该类，它根本不这样做。

这是我正在尝试的：

$('.folder').click(function() {
    $(this).siblings('.folder').removeClass('active'); // remove from all other <SPAN>s
    $(this).addClass('active'); // add onto current
})

示例 HTML：

<ul>
    <li class="closed last">
        <span class="folder" id="16">More coding</span>
    </li>
</ul>  
</li>
<li class="closed collapsable lastCollapsable">
    <span class="folder active" id="12">Music</span>
    <ul style="display: block;" id="browser" class="filetree treeview-famfamfam">
        <li class="closed collapsable">
            <span class="folder active" id="13">Music child</span>
                <ul style="display: block;" id="browser" class="filetree treeview-famfamfam">
                    <li class="closed last">
                        <span class="folder" id="15">More music</span>
                    </li>
                </ul>
         </li>
         <li class="closed last"><span class="folder" id="17">Another child here</span> </li>
     </ul>
    </li>
</ul>

Answer 1

根据我的意见，从所有元素中删除类

$('.folder').click(function() {
    $('.folder.active').removeClass('active'); // Just remove class from all folder
    $(this).addClass('active'); // add onto current
})

Answer 2

这里有 3 种可能的解决方案。

一个基本：

$('span.folder').click(function() {
    $('.folder').removeClass('active');
    $(this).addClass('active');
})

一个快一点：

$('.folder').click(function() {
    $('span.folder.active').removeClass('active');
    $(this).addClass('active');
})

最快但如果有其他元素则不会工作.active：

$('.folder').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
})

JsPerf：http: //jsperf.com/three-solutions

Answer 3

简单有效：

$('.folder').click(function() {
    $('span .folder').removeClass('active'); // remove from all other <SPAN>s
    $(this).addClass('active'); // add onto current
})