jquery class =＆＃34; selected＆＃34;在基于url路径的一部分的导航中

Question

我的导航女巫看起来像这样：

<ul class="main-navbar">
    <li><a href="/folder1/index.php">folder1</a></li>
    <li><a href="/folder2/index.php">folder2</a></li>
    <li><a href="/folder3/index.php">folder3</a></li>       
</ul>

现在我正在使用以下jquery：

jQuery(function(){

var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");

jQuery('.main-navbar a').each(function(){

if(urlRegExp.test(this.href.replace(/\/$/,''))){
jQuery(this).parent().addClass('selected');
}
});

});

当我访问www.mysite.com/folder2/index.php时。该类是为li创建的。但是当我访问www.mysite.com/folder2/somethinge_else.php或访问www.mysite.com/folder2/subfolder/index.php时，我也需要创建它。有没有办法可以实现。

无论folder2中的哪个页面，我输出都需要：

<ul class="main-navbar">
    <li><a href="/folder1/index.php">folder1</a></li>
    <li class="selected"><a href="/folder2/index.php">folder2</a></li>
    <li><a href="/folder3/index.php">folder3</a></li>       
</ul>

如果我是folder1中的某个商品，则输出必须是：

<ul class="main-navbar">
    <li class="selected"><a href="/folder1/index.php">folder1</a></li>
    <li><a href="/folder2/index.php">folder2</a></li>
    <li><a href="/folder3/index.php">folder3</a></li>       
</ul>

我基本上需要一个脚本，它将url路径的第一部分与href的第一部分相匹配。 （在2 //之间）

Answer 1

也许是这样的？

var url = window.location.pathname;
var url = url.split("/");
if(url[1] == "folder2"){
    $("#yourLi").addClass("selected");
}

Answer 2

根据你的描述，我建议：

$('.main-navbar a').addClass(function(){
    // caching for future use:
    var that = this,
        // retrieving the pathname, and splitting it on the '/' characters
        // to form an array (for easier removals later):
        path = that.pathname.split('/'),
        // so we're only retrieving this once per iteration over the collection:
        winPath = window.location.pathname;

    // 'len' (the number of iterations) is 'path.length - 1' because if
    // we remove the last element from the array, they will *all* match:
    for (var i = 0, len = path.length - 1; i < len; i++){

        // testing to see if there's a match at the start of the pathname:
        if (winPath.indexOf(path.join('/')) === 0) {
            // this is entirely unnecessary, and serves only to show
            // (in the demo) what was matched:
            $(this).text(function(_,oldText){
                return oldText + ' (found match at: ' + that.hostname + path.join('/') + ')';
            });

            // if the pathname, or the truncated pathname, matches we add the
            // 'selected' class-name to the element:
            return 'selected';
        }
        else {
            // otherwise we remove the last element of the array, and try again:
            path.pop();
        }
    }
});

JS Fiddle demo

Truncated JS Fiddle demo (removed the call to text())

已编辑，可将'selected'类名添加到li祖先，并满足匹配子域的需要：

$('.main-navbar a').addClass(function(){
    var that = this,
        path = that.pathname.split('/'),
        // retrieves the hostname, including the subdomain,
        // eg: 'subdomain.domain.tld' from the link.
        pathHost = that.hostname,
        winPath = window.location.pathname,
        // as above, but for the window.location:
        winHost = window.location.hostname;

    // if the hostname from the path is exactly equal ('===') to
    // that from the window.location then we test the pathname:
    if (winHost === pathHost) {
        for (var i = 0, len = path.length - 1; i < len; i++){
            if (winPath.indexOf(path.join('/')) === 0) {
                $(that).closest('li').addClass('selected');
            }
            else {
                path.pop();
            }
        }
    }
});

JS Fiddle demo

参考文献：

• jQuery的：
  • addClass()。
  • closest()。
  • text()。
• JavaScript的：
  • Array.prototype.pop()。
  • String.prototype.indexOf()。
  • String.prototype.split()。
  • location API。