jquery class="selected" in navigation based on one part of url path

Question

I have a navigation witch looks like this:

<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>

Now i'm using the following 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');
}
});

});

When i go to www.mysite.com/folder2/index.php. The class is created to the li. But i also need it to be created when I go to www.mysite.com/folder2/somethinge_else.php or to www.mysite.com/folder2/subfolder/index.php. Is there a way this can be accomplished.

No matter what page in folder2 I'm on the output need to be:

<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>

If I'm some ware in folder1 the output needs to be:

<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>

I basically need a script that matches the first part of the url path with the first part of the href. (between the 2 //)

Answer 1

From what you've described I'd suggest:

$('.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()).

Edited to add the 'selected' class-name to the li ancestor, and to address the need to match the subdomains:

$('.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.

References:

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

Answer 2

Maybe something like this?

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