Find the jQuery Bug #8: Solution

_snippet.html

<form id="personForm" name="personForm" method="post" 
    action="/Demo/jsf/main.jsf;jsessionid=0596FB948C236D0FFC16227FC10A0C23" 
    enctype="application/x-www-form-urlencoded">
    <div class="field">
        <label>Last Name</label>
        <input id="personForm:lastname" name="personForm:lastname" type="text" value="" />
    </div>
    <div class="field">
        <label>First Name</label> 
        <input id="personForm:firstname" name="personForm:firstname" type="text" value="" />
    </div>
    <div class="field">
        <label>Address</label>
        <input id="personForm:address" name="personForm:address" type="text" value="" />
    </div>
    <!-- ... more HTML ... -->
</form>

_snippet.js

// <input id="person.name" name="person.name" type="text" />
$( "#person\\.name" ).addClass( "highlight" ); // Success

// <input id="person:name" name="person:name" type="text" />
$( "#person\\:name" ).addClass( "highlight" ); // Success

// <input id="person$name" name="person$name" />
$( "#person\\$name" ).addClass( "highlight" );​ // Success

escapeSelector.js

String.prototype.escapeSelector = function() { 
    return this.replace( /([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, 
        "\\$1" ); 
};

$( document ).ready( function() {
    $( "#" + "personForm:firstname".escapeSelector() )
        .addClass( "required" );
});

fiddle.js

$( document ).ready( function() {
    $( "#personForm\\:firstname" ).addClass( "required" );
});