如何在jQuery中将URL与href匹配？

Question

使用列表进行导航，如果页面 URL（减去路径后的任何内容）与列表项的 href（减去路径）。

例子：

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

当页面 URL 包含 href 的 /p/clothing/dresses/N-10635 部分时，将类“selected”应用于列表项。

到目前为止，我使用以下方法取得了部分结果：

$('.leftNav li a').each(function(){
    if(window.location.href == this.href){
        $(this).parents('li').addClass('selected');
    }
});

<ul class="leftNav">
<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>
<li><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li>
</ul>

然而，只有在 URL 与 href 完全匹配时才应用 'selected' 类 - 这意味着它必须在 href 中包含链接跟踪变量（即：?ab=leftNav:dresses） .考虑匹配“基本”URL 和 href 的方法，我尝试向列表项添加数据属性以仅匹配路径：

$('.leftNav li').each(function(){
    if(window.location.href == (this).data('left-nav-href')){
        $(this).addClass('selected');
    }
});

<ul class="leftNav">
<li data-left-nav-href="/p/clothing/dresses/N-10635"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>
<li data-left-nav-href="/p/clothing/bottoms/capris/N-10764"><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li>
</ul>

我尝试使用 window.location 的变体进行此操作，包括：window.location.href、window.location.href.pathname、window.location.href.indexOf、window.location.href.startsWith。由于这不起作用，我搜索了一种方法来匹配 URL 和 href 的路径，而不管其他参数或变量如何，但我能找到的只是匹配 URL 和 href 的具体方法 with 字符串或参数.我能找到的仅匹配 URL 或 href 的一部分的所有实例都使用“拆分”正则表达式，这引入了我认为我的使用不需要的另一个级别的复杂性。我错过了一个更简单的解决方案吗？

Answer 1

你可以使用indexOf()

$(document).ready(function () {
    $('.leftNav li a').each(function(){
        var ThisHref = ($(this).attr('href').split('?'))[0];
        if(window.location.href.indexOf(ThisHref) > -1) {
            $(this).closest('li').addClass('selected');
        }
   });
});

示例

var url = "http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris";

$(document).ready(function () {
    $('.leftNav li a').each(function(){
        var ThisHref = ($(this).attr('href').split('?'))[0];
        //alert(ThisHref);
        if(url.indexOf(ThisHref) > -1) {
            $(this).closest('li').addClass('selected');
        }
   });
});

.selected{
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="leftNav">
<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>
<li><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li>
</ul>

解释：

$(document).ready(function () {  // run the code after document is ready
    $('.leftNav li a').each(function(){ // loop through <a> on <li>
       // $(this).attr('href') will return href as string .. in your case will return something like '/p/clothing/dresses/N-10635?ab=leftNav:dresses'
       // using .split('?') to separating this href string by '?'
       // [0] get the first string after split (in this case it will be '/p/clothing/dresses/N-10635')
       // combine all of those steps on just one line
       var ThisHref = ($(this).attr('href').split('?'))[0];
       // get the 'window.location.href' which is return your url ..something like 'http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris'
       // try to find (first string after split) into (url/window.location.href)
       if(window.location.href.indexOf(ThisHref) > -1) { // if the url contains the first string after split addClass
          $(this).closest('li').addClass('selected'); 
       }
    });
}); 

你可以阅读.split() here

注意：在维纳斯的回答中，他使用 this.href 将返回 href 为 string .. 在你的情况下会返回类似 '/p/clothing/dresses/N-10635?ab=leftNav:dresses' 他使用 location.pathname 和indexOf()的代码他试图找到location.pathname 进入href

附加：在你的情况下我的答案和维纳斯的答案都可以。这不取决于代码，它取决于您的情况和您正在尝试做的事情.. 像.hide(0) , .slideUp(0) , fadeOut(0) 所有这些都以相同的效果隐藏元素.. 所以代码总是由您使用的情况决定.. 可能是我的代码，甚至维纳斯的代码在其他情况下都不起作用

Answer 2

我想如果你保持你的 html 喜欢

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

但将比较更改为：

$('.leftNav li a').each(function(){
    if (this.href.indexOf(location.pathname) > -1) {
        $(this).parents('li').addClass('selected');
    }
});

你会得到你需要的！

上面的“if”将检查给定的路径是否包含在项目的 href 属性中。

因此，如果您的 URL 是“http://www.yourhost.com/p/clothing/dresses/N-10635?param=value”，则应该找到它的路径 (/p/clothing/dresses/N-10635)，并且给定示例的输出将是：

<li class="selected"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

我希望这会有所帮助！ =)

Answer 3

假设没有任何“？”实际路径中的字符，您可以对位置和 href 使用类似的内容：

function getBaseURL(url) {
    return url.split('?')[0];
}