Addclass to Menu Jquery

Question

I am trying to add a class dynamicly to the menu I have on my website, which is build up as followed.

<nav>
    <ul id="" class="mini-menu">
        <li><a href="home">Home</a></li>
        <li><a href="over-jellyfish">Over Jellyfish</a></li>
        <li><a href="blog">Blog</a></li>
        <li class="contact"><a href="contact">Contact</a></li>
    </ul>
    <ul class="hoofd-menu">
        <li class="websites"><a id="dekstop_menu" href="websites"><i class="fa fa-desktop text-center"></i>Websites</a></li>
        <li class="support"><a id="support_menu" href="support"><i class="fa fa-comment-o text-center"></i>Support</a></li>
    </ul>
</nav>

with Jquery I am tryint to add the class active to the mini-menu by doing the following steps.

jQuery(function() {
    var str = window.location.pathname;
    var page = str.split("/");
    p=page[2];
    var active = p=page[2];
    console.log(active);  

    jQuery('.mini-menu a').each(function() {
        if (jQuery(this).attr('href')  ===  active) {
            jQuery(this).addClass('active');
        }
    });
});

Yet i seem to miss something here, cause nothing shows up within the html as adding a class to the link. Am I missing the fact that the link is not a direct child of the class mini-nav? If so, how do I fix this?

No maybe it's phrased wrong, i am trying to check if the variable active equals to the href link within the anchor tag. if that is true, addclass "active" — Dorvalla
– Dorvalla, Commented Oct 14, 2014 at 13:10
It should work fine, btw you don't need to use .each() to find the link element with the correct href. You can use attribute selector jQuery('.mini-menu a[href="'+active+'"]').addClass('active'); — Anton
– Anton, Commented Oct 14, 2014 at 13:14

queval_j · Accepted Answer · 2014-10-14 13:11:31Z

1

Can you try this :

jQuery(function() {
    var str = window.location.pathname;
    var page = str.split("/");
    p=page[2];
    var active = p=page[2];
    console.log(active);  

    jQuery('.mini-menu a').each(function() {
        (function (self) {
        if (jQuery(self).attr('href')  ===  active) {
            jQuery(self).addClass('active');
        }
        })(this);
    });
});

answered Oct 14, 2014 at 13:11

queval_j

1882 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dorvalla Over a year ago

Thank you. That was what I was looking for. I adds the class now :) I ll accept when I can.

queval_j Over a year ago

It's because of "each". When you are using "each" and that you would like to change something : create a function like I did to copy the current variables inside. If you don't do that, the "this" will always be equal to the last element when you will try to change something.

Collectives™ on Stack Overflow

Addclass to Menu Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related