javascript - 将选定的类添加到单击的元素并将其从其他元素中删除

Question

我有这样的 ul li 结构

     <div id="categoryTree">
  <ul>
    <li id="cat_15"> <a class="hasSubCat"  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">North India</a>
      <ul>
        <li id="cat_17"> <a class="hasSubCat"  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">All India</a>
          <ul>
            <li id="cat_31"> <a class=""  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">First Class</a> </li>
            <li id="cat_32"> <a class=""  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">Luxury Level</a> </li>
            <li id="cat_33"> <a class=""  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">Oulent Level</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li id="cat_16"> <a class="hasSubCat"  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">South India</a> </li>
    <li id="cat_37"> <a class=""  href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">All India</a> </li>
  </ul>
</div>

我想将选定的类添加到被点击的类中并将其从其他类中删除

我正在使用下面的代码来做到这一点

$('#categoryTree li').on('click',function(){
        $('#categoryTree li').removeClass('selected');
        $(this).addClass('selected');
        });

但是每次class都加到最上面li.please help ..... 提前致谢

Answer 1

我没有看到 #categoryTree 的 ID，因此我们在这里缺少一些信息，但您似乎想从选定的 sibling 中删除该类。你可以这样做......

$('#categoryTree li').on('click',function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});