如何改变儿童和孙子是同一类JQUERY的班级

Question

我正在开发一个菜单，我想在有人点击它时更改图标。我已经更改了图标，但所有孩子他们也改变了图标，因为他们共享同一个班级。结构类似于：

点击它我们可以看到。

选择的菜单已更改但其子项也已更改。问题是图标更改是因为类名和此类名在子孙中是相同的。

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”变量执行更改名称类的操作。要从Minus更改为Add而另一部分要反转的部分：

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");
        }
    });

当函数找到它时，使用icon-add类获取所有子孙。那么我怎样才能只更改所选的菜单？

问候。

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");
        }
    });