如何匹配 URL 和 jQuery 中的 href？

Question

使用列表进行导航，我正在寻找一种干净的方法来将 'selected' class 应用于列表项，如果页面 URL （减去路径后的任何内容）匹配列表项的 href（减去路径后的任何内容）。

示例：

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

当页面 URL 包含 href 的 /p/clothing/dresses/N-10635 部分时，将 class "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' class - 这意味着它必须包括link-href 中的跟踪变量（即：?ab=leftNav:dresses）。想办法匹配 "base" 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 的一部分的所有实例都使用 "split" RegEx，这引入了我认为我的使用不需要的另一级别的复杂性。我是否缺少更简单的解决方案？

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

Note: in Vinas answer he use this.href which will return href as string .. in your case will return something like '/p/clothing/dresses/N-10635?ab=leftNav:dresses' and he use location.pathname and the code of indexOf() he try to find the location.pathname into the href

附加：在你的情况下我的答案和 Vinas 的答案都有效。这不取决于代码它取决于你的情况和你想做什么..像.hide(0) , .slideUp(0) , fadeOut(0)这样的东西所有这些都隐藏了具有相同效果的元素..所以代码总是由你使用的情况决定。 . 可能是我的代码，甚至 Vinas 的代码在另一种情况下都不起作用

Answer 2

假设没有任何 '?'实际路径中的字符你可以对位置和 href 使用类似这样的东西：

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

Answer 3

我想如果你保持你的 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>

希望对您有所帮助！ =)

如何匹配 URL 和 jQuery 中的 href？

How to match URL with href in jQuery?

html

javascript

url

jquery

href