如何在jQuery中將URL與href匹配？

Question

使用列表導航，我正在尋找一種干凈的方法，如果頁面URL（減去路徑后的任何內容）與列表項的href（減去路徑后的所有內容）匹配，則將“ selected”類應用於列表項。

例：

<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專門與字符串或參數進行匹配的方法。 我可以找到僅匹配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（）的信息

注意：在Vinas回答中，他使用this.href ，它將以字符串形式返回href ..在您的情況下，將返回類似'/ p / clothing / dresses / N-10635？ab = leftNav：dresses'的名稱，並且他使用location.pathname和indexOf()的代碼，他嘗試在href找到location.pathname

另外 ： 在您的情況下 ，我的答案和Vinas的答案都會起作用。 那不取決於代碼，取決於您的情況和您要執行的操作..類似.hide(0) , .slideUp(0) , fadeOut(0)的那些都隱藏具有相同效果的元素..因此該代碼始終由您使用的情況決定。.可能是我的代碼，甚至Vinas的代碼在另一種情況下也無法使用

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”將檢查給定的路徑是否包含在item的href屬性中。

因此，如果您的網址是“ 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];
}