Question

If my html looked like this:

<td class='controlCell'>     <input class='inputText' id='SearchBag.CompanyName' name='SearchBag.CompanyName' type='text' value='' /> </td> 

How could I select #SearchBag.CompanyName with JQuery? I can’t get it to work and I fear it’s the dot that’s breaking it all. The annoying thing is that renaming all my id’s would be a lot of work, not to mention the loss in readability.

Note:
Please let’s not start talking about how tables are not made for lay-outing. I’m very aware of the value and shortcomings of CSS and try hard to use it as much as possible.

Answer 1

@Tomalak in comments:

since ID selectors must be preceded by a hash #, there should be no ambiguity here

“#id.class” is a valid selector that requires both an id and a separate class to match; it’s valid and not always totally redundant.

The correct way to select a literal ‘.’ in CSS is to escape it: “#id\.moreid”. This used to cause trouble in some older browsers (in particular IE5.x), but all modern desktop browsers support it.

The same method does seem to work in jQuery 1.3.2, though I haven’t tested it thoroughly; quickExpr doesn’t pick it up, but the more involved selector parser seems to get it right:

$('#SearchBag\\.CompanyName');