How does one match an element in jQuery without needing to match case?

Question

I have a page with some navigation and I'm trying to highlight the link if that's the page we're on. It works almost quite well just like this:

function highlightPageInNav() {
        // Get file name.
        var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
        // Build selector.
        var attrSelector = "a[href='" + filename + "']";
        // Set class of li to "current".
        $("#nav ul li").has(attrSelector).addClass("current");
}

The problem is that the anchors in my navigation say, for example, "CreateUser.aspx", but the script won't match that if the current URL contains "createuser.aspx".

I've tried several other ideas, including using the following to replace part of the script above. I convert the filename toLowerCase() and then try to match it to the href .toLowerCase() and those alerts show me what I expect, but the $(this).addClass("current"); doesn't actually do anything -- most likely, I guess, because $(this) no longer applies to the element I'm trying to modify.

$("#nav ul li a").each(function () {
    alert($(this).attr("href"));
    hrefLowerCase = $(this).attr("href").toLowerCase();
    alert(hrefLowerCase);
    if (filename == hrefLowerCase) {
        alert("found one!");
        $(this).addClass("current");  // This is where it stops doing what I desire.
    }
});

So, if someone can show me how to very simply make my script match both "CreateUser.aspx" and "createuser.aspx", that would be much appreciated! Thanks!

here you go http://stackoverflow.com/questions/5755722/case-insensitive-attribute-value-selector-with-jquery — DGS, Sep 11 '13 at 14:07
You can try storing this as a variable in each loop and later make calls to this variable instead of "this". — Kelu Thatsall, Sep 11 '13 at 14:09
Trying these out. Thanks! I seriously googled for a while for this and didn't see these questions already existing. — mrcoulson, Sep 11 '13 at 14:11

Kelu Thatsall · Accepted Answer · 2013-09-11T14:49:37.110

1

I've corrected DGS's answer a little bit to make it work.

var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1).toLowerCase();
$('#nav ul li a').each(function() {
    if ($(this).attr('href').toLowerCase() === filename) {
        $(this).parent().addClass('current');
    }
});

It should add class current to li tag, not to anchor.

Other way as suggested is to use filter:

var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1).toLowerCase();
$('#nav ul li a').filter(function() {
    return $(this).attr('href').toLowerCase() === filename;
}).parent().addClass('current');

edited Sep 11 '13 at 14:49

answered Sep 11 '13 at 14:25

Kelu Thatsall

2,494
1
22
50

That does it! And as a result of asking this question, I know about the jQuery filter function. Thanks, guys! – mrcoulson Sep 11 '13 at 14:43
Btw, I don't think it's the best idea to do it like you want it to be done. It is because for example if your address looks like that: `CreateUser.aspx#`, or `CreateUser.aspx?c=1234` then it won't match. It's much better to check the file you are in server-side – Kelu Thatsall Sep 11 '13 at 15:00
Good call. I'm trying to rely less on server-side code than I usually do (it's a learning thing for me) and more on JavaScript, so I could just remove those characters: `filename = filename.substring(0, filename.indexOf("#"));` Thanks for pointing that out! – mrcoulson Sep 11 '13 at 15:25
Btw, remember that `this.href` is not the same as `$(this).attr('href')` – Kelu Thatsall Sep 11 '13 at 15:51

score 0 · Answer 2 · answered Sep 11 '13 at 14:11

0

var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);    
$('#nav ul li a').filter(function() {
    return this.href.toLowerCase() == filename;
}).addClass('current');

answered Sep 11 '13 at 14:11

DGS

6,015
1
21
37

If you'll indulge me one question: I've attempted to combine your idea and a fiddle from another post, but it's not appearing to have any effect. $("#nav ul li a[href]").filter(function () { return this.href.toLowerCase() == filename; }).parent().addClass("current"); – mrcoulson Sep 11 '13 at 14:34

How does one match an element in jQuery without needing to match case?

2 Answers2