在子孙同班的情况下如何更改班级JQUERY

Question

I am developing one menu and I want to changed the icon when somebody click it. I have changed the icon but all children that they have change the icon too, due to they share same class. The structure is similar to:

And when click it we can see.

Menu selected has changed but its children too. The problem is that icon change because the class name and this class name are the same in children and grandchildren.

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>

With this class="icon-add Fright Fs16" I change the icon image. I must alternate between icon-add and icon-minus class.

Part of my JQuery code, the "logo" variable does the action to change name class. A part to change from Minus to Add and another part to reverse :

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

When function find its, gets alls children and grandchildren with icon-add class. So how can I change only the menu selected?

Regards.

Answer 1

Finally I gets my goals. How I can't find the specific element, I decided iterate all children level and when I gets the element that I want, I remove old class and insert new class. Copy the code, my modification is between //jmf comments. One part to change + to - and another part to change - to +.

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