Question

Selector ‘Attribute Starts With' selects elements that have the specified attribute with a value beginning exactly with a given string, according to the documentation. I would like to to do the exact opposite thing – I would like to select those elements whose value of a specified attribute is at the beginning of given string.

Consider following example:

<a href="/about-us/">About us</a>
<a href="/products/">Products</a>
<a href="/contact/">Contact</a>

Current URL is /products/some-catogory/sub-category/product/?x=y&z=x and I want to highlight the second menu item. What’s the best way to do it?

Answer 1

I’d suggest:

var path = document.location.pathname;
$('a').filter(
    function(i,e){
        return $(this).attr('href').indexOf(path) == 0;
    }).addClass('highlight');

JS Fiddle demo.

Where the highlight class-name defines, appropriately enough, the highlighting.

This is tested with the following HTML:

<a href="/about-us/">About us</a>
<a href="/products/">Products</a>
<a href="/_display/">_display</a>
<a href="/contact/">Contact</a>​

Bear in mind this is proofed on JS Fiddle, so it’ll match the the third a element (since that’s the one that matches.

Edited to offer a slightly more generic solution, in which you can match by a given directroy/subdirectory:

function directory(path) {
    if (!path) {
        return false;
    }
    else {
        var _tmp = path.split('/'),
            directories = [];
        for (var i = 0, len = _tmp.length; i < len; i++) {
            if (_tmp[i].length > 0 && _tmp[i].indexOf('?') == -1) {
                directories.push(_tmp[i]);
            }
        }
        return directories;
    }
}
// in the real world use:
// var path = document.location.pathname,
var path = '/products/some-catogory/sub-category/product/?x=y&z=x',
    dir = directory('/products/some-catogory/sub-category/product/?x=y&z=x')[0];
$('a').filter(
    function(i, e) {
        return $(this).attr('href').indexOf(dir) == 0 || $(this).attr('href').indexOf('/' + dir) == 0
    }).addClass('highlight');​

JS Fiddle demo.