如何从DOM树中的每个其他元素中删除一个类，一旦另一个元素被单击?——jQuery

How do I remove a class from every other element in a DOM tree once another element is clicked? - jQuery

本文关键字：元素 jQuery 单击 一个 另一个 DOM 删除 其他      更新时间：2023-09-26

这就是我的DOM树的样子:

<div id="content">
   <div id="sidebar">
      <ul>
          <li class="selected"><a href="#">Header 1</a>
              <ul>
                   <li><a href="#">Link 1</a></li>
                   <li><a href="#">Link 2</a></li>
                   <li><a href="#">Link 3</a></li>
                   <li><a href="#">Link 4</a></li>
              </ul>
          </li>
          <li><a href="#">Header 2</a>
            <ul>
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
            </ul>
          </li>
          <li><a href="#">Header 3</a>
            <ul>
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
            </ul>
          </li>
          <li><a href="#">Header 7</a>
             <ul>
             </ul>
          </li>
          <li><a href="#">Header 4</a>
             <ul>
             </ul>
          </li>
          <li><a href="#">Header 5</a>
            <ul>
              <li><a href="#">Link 1</a></li>
            </ul>
          </li>
      </ul>
   </div>
</div>

所以当我想为一个元素做一个简单的addClass和removeClass时，这是有效的:

$(document).ready(function() {
    $('div#content div#sidebar ul li a').click(function(e) {
        if ($(this).parent().hasClass('selected')) {
            $(this).parent().removeClass('selected');
        }
        else {
            $(this).parent().addClass('selected');
        }        
        e.preventDefault();
    });
});

然而，这并没有从$(this).parent()的每个"对等"中删除selected类。它只从当前选定项的父类中删除类。

我想做的是，当您单击链接Header 2时，它将类selected添加到Header 2，并检查所有兄弟元素(在本例中，li s用于链接Header 1 - 7)，并删除任何兄弟元素上的类，如果它找到它。因此，实际上，在DOM树的该级别上只能有一个selected。

我该怎么做?

$(function () {
    $('#sidebar > ul > li > a').bind('click', function (e) {
        e.preventDefault();
        $('#sidebar > ul > li').removeClass('selected');
        $(this).parent().addClass('selected');
    });
});

这选择嵌套在<li>元素的第一层中的<a>元素，并将.selected类添加到它的父<li>元素中(同时也删除.selected类的所有其他实例)。

这是一个jsfiddle: http://jsfiddle.net/jasper/RRk25/

这个可以优化:

$(function () {
    var $first_tier_li = $('#sidebar > ul > li');
    $first_tier_li.children('a').bind('click', function (e) {
        e.preventDefault();
        $first_tier_li.removeClass('selected');
        $(this).parent().addClass('selected');
    });
});

这节省了每次点击时查找DOM节点，因为它们从document.ready事件触发时就被缓存了。

下面是优化的示例:http://jsfiddle.net/jasper/RRk25/1/

删除所有$('div#contentdiv#sidebar ul li')元素的类，然后将该类添加到单击的那个。这对你有用吗?

看这里

相关文章：