.parents().addClass("selected")；不工作

Question

我希望当选择一个子项时，三级下拉菜单中的所有父项都突出显示。根据我所读到的和得到的建议，这应该是可行的：

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

但对我来说却并非如此。

我都试过了：

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

和

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

但还是一无所获。有没有人能看到我做错了什么？你可以在这里看到它的实际效果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

使用parentsUntil(在这里您将把直到您想要的父级)，例如，如果您想要所有的父级直到类容器-您需要这样做

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

Answer 2

jquery选择器或addClass()方法没有问题！问题是使用if(this.href.trim() == window.location)语句。它不会返回true，因此没有添加这个类。检查工作代码，this.href只返回#，而不是完整的url。

Answer 3

使用location.href或window.location.href而不是window.location：

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

笔记

1. window.location是一个对象：

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

您可以采用的另一种方法是单行

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