.parents().addClass("selected"); not working

Question

I want all parent items in a three level drop down menu to highlight when a child item is selected. From what I've read and been advised, this should work:

$(this).parents().addClass("selected");

But for me it does not.

I have tried both:

$(this).parent().addClass("selected");

and

$(this).parents("li").addClass("selected");

But still nothing. Can anybody see what I am doing wrong here please? You can see it in action here http://portergroup.businesscatalyst.com/hyundai.html

<!-- menu starts here -->
<div class="navBox">
<ul>
    <li><a href="#">SALES</a>
        <ul id="subnavlist" class="newWidth">
            <li><a href="#">NEW</a>
                <ul id="sub-subnavlist">
                    <li><a href="#">Hyundai</a></li>
                    <li><a href="#">Bomag</a></li>
                </ul>
            </li>
            <li class="subNavIndustry"><a href="#">INDUSTRIES SERVED</a>
                <ul class="navIndustries" id="sub-subnavlist">
                    <li><a href="#">Quarry and Mining</a></li>
                    <li><a href="#">Construction</a></li>                    
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
<!-- menu ends here -->


$('.navBox li a').each(function(index) {
        if(this.href.trim() == window.location)
            //$(this).addClass("selected");  //this line works as far as highlighting the selected item
            $(this).parents().addClass("selected");  //this does not work
        });

Answer 1

Use parentsUntil(here you will put until which parent you want), for example if you want all parents until class container - you do

$(this).parentsUntil('.container').addClass("selected");

Answer 2

There is no problem with the jquery selector or addClass() method! The prpoblem is with if(this.href.trim() == window.location) statement. It doesn't return true and hence the class was not added. Check the working code here this.href just returns # not the full url.

Answer 3

Use location.href or window.location.href instead of window.location:

    $('.navBox li a').each(function(index) {
        if(this.href.trim() === window.location.href) {
            $(this).parents().addBack().addClass("selected");
        }
    });

NOTE:

1. window.location is an object:

   Location {replace: function, assign: function, ancestorOrigins: DOMStringList, origin: "http://portergroup.businesscatalyst.com", hash: ""…}

Another approach you could take is this one-line:

$('.navBox li a[href="' + location.href + '"]')
.parents().addBack().addClass('selected');

Answer 4

I took a little longer to get an answer out, and I'm not sure I should post this since you already have your answer, but I feel this could help you debug your issues in the future.

In essence, make sure this.href.trim() really does == window.location, and always use curly braces with your JavaScript blocks. While it is not required, it can certainly help keep your code clean.

When in doubt, I recommend console.log(), but logging to a real div is easier for code the snippet's sake.

$('.navBox li a').each(function(index) {
    if(this.href.trim() == window.location) {
        $("#log").append("Ok:" + window.location + " | " + this.href.trim() + "<br/>");
        $(this).parents("li").addClass("selected");
    }
    else {
        $("#log").append("No:" + window.location + " | " + this.href.trim() + "<br/>");
    }
});

li.selected > a {background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- menu starts here -->
<div class="navBox">
<ul>
    <li><a href="#">SALES</a>
        <ul id="subnavlist" class="newWidth">
            <li><a href="#">NEW</a>
                <ul id="sub-subnavlist">
                    <li><a href="#">Hyundai</a></li>
                    <li><a href="http://stacksnippets.net/js">Bomag</a></li>
                </ul>
            </li>
            <li class="subNavIndustry"><a href="#">INDUSTRIES SERVED</a>
                <ul class="navIndustries" id="sub-subnavlist">
                    <li><a href="#">Quarry and Mining</a></li>
                    <li><a href="#">Construction</a></li>                    
                </ul>
            </li>
        </ul>
    </li>

</ul>
</div>
<p id="log"></p>
<!-- menu ends here -->

http://jsfiddle.net/tdu2quw8/