If URL's match in link and window, then add a class

Question

I'm trying to write a match script to detect the page your on.. and to bold links that are also on the same page pointing to the page your currently on.

    $(document).ready(function () {

    var url = window.location.href;
    var match = $("a").attr("href");


    if(url == match) {
       $(match).parent().addClass("tomato");
    }


});

Answer 1

Try

$('a').each(function () {
    if ($(this).attr('href') == window.location.href) { 
        $(this).addClass('tomato');
    }
});

Answer 2

You can try like this.

$('a[href~="'+url+'"]').addClass("tomato");

Hope this will help you.

Answer 3

$('a').each(function() {
    var self = $(this);

    if (self.attr("href") == url) {
           // do something..
           self.css('font-weight', 'bold');
    }
});

http://jsfiddle.net/qbdTR/

Answer 4

There was simple mistake in your code.

var anchor = $("a");
var match = anchor.attr("href");
$(anchor).parent().....

$(document).ready(function () {
    var url = window.location.href;
    var anchor = $("a"); 
    var match = anchor.attr("href");

    if(url == match) {
       $(anchor).parent().addClass("tomato");
    }
});

It would be better if you can use;
1. parent with id or class - $(anchor).parent('#anchorParent') - Use the same id in HTML too.
2. Or use $(anchor).parents('div:eq(0)') for first div parent.

The same thing is applicable for anchor too HTML : <a id="myAnchor"> , script : $("#myAnchor");