Javascript 按当前浏览器url筛选li元素

我正在尝试通过检测浏览器url将活动类放入导航。。。我的代码看起来像

    $('[ui-nav] a, [data-ui-nav] a').filter( function() {
        console.log(location.href)
        console.log($(this).attr('href'))
        return location.href.indexOf( $(this).attr('href') ) != -1;
    }).parent().addClass( 'active' );

输出：

app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /
app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /blog
app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /profile
app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /test

我的导航：

Home -> /
Blog -> /blog
Profile -> /profile
Testing -> /test



<ul class="nav" data-ui-nav>
    <li class="nav-header hidden-folded">
        <span class="text-xs text-muted">Main</span>
    </li>
    <li>
        <a href="/">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Home</span>
        </a>
    </li>
    <li>
        <a href="/blog">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Blog</span>
        </a>
    </li>
    <li>
        <a href="/profile">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Profile</span>
        </a>
    </li>
    <li>
        <a href="/test">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Testing</span>
        </a>
    </li>
</ul>

Home->/
博客->/Blog
Profile->/Profile
测试->/测试


主要的

通过这个例子，li的家庭和博客得到了一个活跃的类。。如果有人能给我一个如何更正这段短代码的提示，我会很高兴：）

---

向您致意

请尝试比较

路径名

属性

return location.pathname === this.pathname;

链接路径名示例：

$（'a'）。每个（函数（）{
log（'Link pathname:'，this.pathname）；
});
a{显示：内联块；填充：5px 10px；背景：黄色}
我找到了一个行之有效的解决方案。。好吧，这不是最好的，但我是个新手；）

你能给我们你想要匹配的html代码吗？（stackoverflow代码编辑器中的一个工作示例将是最好的）感谢charlietfl提供此解决方案，通过此解决方案，我获得了正确的匹配。。。但它在/blog/welcome to my blog上失败。它没有显示任何内容。将这两个值记录到控制台进行手动比较，以便找出导致它不匹配的原因
    $('[ui-nav] a, [data-ui-nav] a').filter( function() {
        if ($(this).attr('href') === '/') {
            if (location.pathname === $(this).attr('href')) {
                return true
            } else { return false }
        } else {
            return location.href.indexOf( $(this).attr('href') ) != -1;
        }
    }).parent().addClass( 'active' );