jquery - 如何更改子孙同级JQUERY的类(class)

Question

我正在开发一个菜单，我想在有人点击它时更改图标。我已经更改了图标，但所有 child 也更改了图标，因为他们共享同一个类(class)。结构类似于:

当点击它时我们可以看到。

所选菜单已更改，但其子菜单也已更改。问题是图标改变是因为类名和这个类名在 child 和孙子中是相同的。

HTML:

<li id="formularioMenu:j_id244" role="menuitem" class="active-menu-parent">
    <a href="#" class="menulink ripplelink active-menu active-menu-restore">
        <i class="icon-null"></i>
        <i class="icon-folder-empty"></i> 
        Foo2
        <i class="icon-add Fright Fs16"></i>
    </a>
    <ul class="menu-level-1 active-menu active-menu-restore" role="menu">
        <li id="formularioMenu:j_id245" role="menuitem">
            <a class="menulink ripplelink" href="http://localhost:8080/foo21.xhtml">
            <i class="icon-null"></i>
            <i class="icon-doc-text-1"></i>
            Foo2.1</a>
        </li>
        <li id="formularioMenu:j_id246" role="menuitem">
            <a class="menulink ripplelink" href="http://localhost:8080/foo22.xhtml">
            <i class="icon-null"></i>
            <i class="icon-doc-text-1"></i>
            Foo2.2</a>
        </li>
        <li id="formularioMenu:j_id247" role="menuitem">
            <a class="menulink ripplelink" href="http://localhost:8080/foo23.xhtml">
            <i class="icon-null"></i>
            <i class="icon-doc-text-1"></i>
            Foo2.3</a>
        </li>
        <li id="formularioMenu:j_id248" role="menuitem">
            <a class="menulink ripplelink" href="http://localhost:8080/foo24.xhtml">
            <i class="icon-null"></i>
            <i class="icon-doc-text-1"></i>
            Foo2.4</a>
            <i class="icon-add Fright Fs16"></i>
            </a>
            <ul class="menu-level-2" role="menu">
            ...
            </ul>
        </li>
        <li id="formularioMenu:j_id249" role="menuitem">
            <a class="menulink ripplelink" href="http://localhost:8080/foo25.xhtml">
            <i class="icon-null"></i>
            <i class="icon-doc-text-1"></i>
            Foo2.5</a>
            <i class="icon-add Fright Fs16"></i>
            </a>
            <ul class="menu-level-2" role="menu">
            ...
            </ul>
        </li>
        <li id="formularioMenu:j_id250" role="menuitem">
            <a href="#" class="menulink ripplelink">
            <i class="icon-null"></i>
            <i class="icon-folder-empty"></i> 
            Foo2.6          
        </li>
        ...
    </ul>
</li>

用这个 class="icon-add Fright Fs16" 我改变了图标图像。我必须在 icon-add 和 icon-minus 类之间交替。

我的 JQuery 代码的一部分，“logo”变量执行更改名称类的操作。一部分从减号变为加号，另一部分变为反向:

bindEvents: function() {
    var $this = this;
    
    if(this.mobile) {
        this.menuWrapper.css('overflow-y', 'auto');
    }
    else {
        this.menuWrapper.perfectScrollbar({suppressScrollX: true});
    }

    this.menulinks.on('click',function(e) {
        var menuitemLink = $(this),
        menuitem = menuitemLink.parent();

        if(menuitem.hasClass('active-menu-parent')) {
            var logo = menuitem.find('i.icon-minus');
            
            if(logo.hasClass('icon-minus')){                    
                logo.removeClass('icon-minus');
                logo.addClass('icon-add');
            }
            
            menuitem.removeClass('active-menu-parent');
            menuitemLink.removeClass('active-menu active-menu-restore').next('ul').removeClass('active-menu active-menu-restore');
            $this.removeMenuitem(menuitem.attr('id'));
        }
        else {
            var activeSibling = menuitem.siblings('.active-menu-parent');
            if(activeSibling.length) {
                activeSibling.removeClass('active-menu-parent');
                $this.removeMenuitem(activeSibling.attr('id'));

                activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu active-menu-restore');
                activeSibling.find('li.active-menu-parent').each(function() {
                    var menuitem = $(this);
                    menuitem.removeClass('active-menu-parent');
                    $this.removeMenuitem(menuitem.attr('id'));
                });
            }
            
            var logo = menuitem.find('i.icon-add');
            
            if(logo.hasClass('icon-add')){                  
                logo.removeClass('icon-add');
                logo.addClass('icon-minus');
            }

            menuitem.addClass('active-menu-parent');
            menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
            $this.addMenuitem(menuitem.attr('id'));
        }

        if(menuitemLink.next().is('ul')) {
            e.preventDefault();
        }
        else {
            $this.menuWrapper.removeClass('showmenu');
            $this.mobileMenuButton.removeClass('MenuClose');
        }

        $this.saveMenuState();
        
        if(!$this.mobile) {
            $this.menuWrapper.perfectScrollbar("update");
        }
    });

当函数找到它时，获取带有图标添加类的所有子孙。那么我怎样才能只更改选定的菜单呢？

问候。

Answer 1

我终于实现了我的目标。我怎么找不到特定的元素，我决定迭代所有子级，当我得到我想要的元素时，我删除旧类并插入新类。复制代码，我的修改是在//jmf注释之间。一部分将 + 更改为 -，另一部分将 - 更改为 +。

bindEvents: function() {
    var $this = this;

    if(this.mobile) {
        this.menuWrapper.css('overflow-y', 'auto');
    }
    else {
        this.menuWrapper.perfectScrollbar({suppressScrollX: true});
    }

    this.menulinks.on('click',function(e) {
        var menuitemLink = $(this),
        menuitem = menuitemLink.parent();

        if(menuitem.hasClass('active-menu-parent')) {
            //jmf
            var enlace = menuitem.children();

            if(enlace.length){
                var vinculo = enlace.first();

                if(vinculo.length){
                    var lineasVinculo = vinculo.children();

                    if(lineasVinculo.length){
                        var logo = lineasVinculo.last();

                        if(logo.length){
                            if(logo.hasClass('icon-minus')){
                                logo.removeClass('icon-minus');
                                logo.addClass('icon-add');                                  
                            }                                                               
                        }                           
                    }                       
                }
            }
            //fin jmf

            menuitem.removeClass('active-menu-parent');
            menuitemLink.removeClass('active-menu active-menu-restore').next('ul').removeClass('active-menu active-menu-restore');
            $this.removeMenuitem(menuitem.attr('id'));
        }
        else {
            var activeSibling = menuitem.siblings('.active-menu-parent');
            if(activeSibling.length) {
                activeSibling.removeClass('active-menu-parent');
                $this.removeMenuitem(activeSibling.attr('id'));

                activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu active-menu-restore');
                activeSibling.find('li.active-menu-parent').each(function() {
                    var menuitem = $(this);
                    menuitem.removeClass('active-menu-parent');
                    $this.removeMenuitem(menuitem.attr('id'));
                });
            }               

            //jmf
            var enlace = menuitem.children();

            if(enlace.length){
                var vinculo = enlace.first();

                if(vinculo.length){
                    var lineasVinculo = vinculo.children();

                    if(lineasVinculo.length){
                        var logo = lineasVinculo.last();

                        if(logo.length){
                            if(logo.hasClass('icon-add')){
                                logo.removeClass('icon-add');
                                logo.addClass('icon-minus');                                    
                            }                                                               
                        }                           
                    }                       
                }
            }    
            //fin jmf

            menuitem.addClass('active-menu-parent');
            menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
            $this.addMenuitem(menuitem.attr('id'));
        }

        if(menuitemLink.next().is('ul')) {
            e.preventDefault();
        }
        else {
            $this.menuWrapper.removeClass('showmenu');
            $this.mobileMenuButton.removeClass('MenuClose');
        }

        $this.saveMenuState();

        if(!$this.mobile) {
            $this.menuWrapper.perfectScrollbar("update");
        }
    });