2

I have some HTML like this (yep, it's a bit weird, but it's an existing project):

<table>
<tr id="21.30---22.00">
    <td class='51'>Text</td>
</tr>
</table>​

And some JS like this:

$(document).ready(function(){
    var time = "21.30---22.00";

    // jQuery needs . to be escaped to \\.
    // Regex needs \ to be escaped as \\. 
    // JS needs \ to be escaped as \\.

    time = time.replace(/\./g,'\\\\\\.');

    $("tr#" + time + " td.51").css("color","blue");
});​

In reality, the time string is produced from some JSON, hence the weird way round.

This worked in previous versions of jQuery, but doesn't in 1.8, presumedly due to the changes in Sizzle. Here is an example of it not working:

jQuery 1.7.2: http://jsfiddle.net/VnA4m/

jQuery 1.8: http://jsfiddle.net/VnA4m/1/

Any ideas of how I can get from my time = "21.30---22.00" to a selector that works in 1.8?

Rich Bradshaw
  • 67,265
  • 44
  • 170
  • 236
  • http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html - This is more of a recommendation; but it may be worth re-considering your `id` values. :) – Richard Aug 17 '12 at 12:46
  • 1
    Yeah, I know. I'm not sure why I wrote this as I did 2 years ago, amazing what you learn in 2 years isn't it! – Rich Bradshaw Aug 17 '12 at 13:11

2 Answers2

5

try this code--- it will select by using attribute selector

$("[id='21.30---22.00']").foo
RAKESH HOLKAR
  • 1,997
  • 5
  • 22
  • 37
  • 1
    +1 as this is a better solution. Perhaps using a custom `.filter` function would be even more robust. – pimvdb Aug 17 '12 at 12:25
3

The regexp doesn't need escaping the \s - the only thing in your regexp is .. Also, the requirement of jQuery is that it has to receive the slashes; that's why you need two so that the JavaScript interpreter doesn't consume it.

So, \\. should be enough: http://jsfiddle.net/VnA4m/2/. This also works in jQuery 1.7.2 - I'm not sure why the extraneous slashes actually worked there. Looks like it was a bug - \\\\. fails, \\\\\\. again works...

pimvdb
  • 141,012
  • 68
  • 291
  • 345
  • your last statement is not true for html5: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#classes - like for IDs these restrictions were dropped. – Christoph Aug 17 '12 at 12:48
  • @Cripstoph: You're right, yet `.a` works whereas `.1` does not. Perhaps the requirement lies in the CSS selector specification. – pimvdb Aug 17 '12 at 12:49
  • Thanks a lot – wonder why the \\\\\\ ever worked then?! Though yours is the code I used, I gave the other guy the Accepted Answer because he only has 107 rep, and I would have never thought of doing it that way :) – Rich Bradshaw Aug 17 '12 at 12:50
  • @pimvdb Take a closer look - `.1` works - it's the first console-call, while `.a` does not... also in your fiddle /2/ you are using a class starting with a number and it works too. – Christoph Aug 17 '12 at 14:07
  • @Christoph: You're completely correct, I swapped those. It's still weird ``#\\\\\\. td.a`` works, but my reasoning indeed doesn't make sense. – pimvdb Aug 17 '12 at 14:11