JQuery issue with query having $ in string

Question

I have an issue with jquery where elements are not found when the query string has '$' char in them -- is there a known issue? Unfortunately search engines make it so hard to searh for symbols in threads.

I have an html such as this:

<TD id="ctl00$m$g_cd3cd7fd_df51_4f95_9057_d98f0c1e1d60$ctl00$ctl00_5"
    class="MenuItem"
    onclick="setSelectedTab('ctl00$m$g_cd3cd7fd_df51_4f95_9057_d98f0c1e1d60$ctl00$ctl00_5');"
    tabsrowid="ctl00$m$g_cd3cd7fd_df51_4f95_9057_d98f0c1e1d60$ctl00$ctl00_"
    nohide="false">...

and my jscript goes something like:

function setSelectedTab(selection) {
    var ids = selection.split('/');
    for (var i = 0; i<ids.length; i++) {
        var item = $("#" + ids[i]);
        item.addClass("selected");
        $("#" + item.attr("tabsrowid")).show();
    }
}

While analyzing in firebug, I see that 'item' is an empty set. If I query $('.MenuItem') for example, it correctly returns a result set with 25 matching items in the page; it appears like $(s) doesn't work when s contains $ chars in it?

What's the solution to it? Sorry if it a dumb question or well known issue -- as I said I tried to google around, but unsuccessfully.

Note: It's not an issue with javascript itself, or duplicate ids, or jquery not loaded, or anything like that. The function does get called onclick, and if I replace $('#' + ids[i]) with document.getElementById(ids[i]), it does return the correct element. fyi, the string passed to the function setSelectedTab usually contains a hierarchical path to the TD element; though in the example TD above, the ids.length is 1.

Thanks, Raja.

Answer 1

Perhaps try escaping them with backslashes

<TD id="ctl00\$m\$g_cd3cd7fd_df51_4f95_9057_d98f0c1e1d60\$ctl00\$ctl00_5"
    class="MenuItem"
    onclick="setSelectedTab('ctl00\$m\$g_cd3cd7fd_df51_4f95_9057_d98f0c1e1d60\$ctl00\$ctl00_5');"
    tabsrowid="ctl00\$m\$g_cd3cd7fd_df51_4f95_9057_d98f0c1e1d60\$ctl00\$ctl00_"
    nohide="false">...