Selector problem: $('#\\<foo') and $('#bar\\>') works, but $('#\\<buz\\>') doesn't.

Selector problem: $('#\\<foo') and $('#bar\\>') works, but $('#\\<buz\\>') doesn't.

I found a problem with the following code:

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  2. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
  3. <head>
  4.     <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
  5.     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js'></script>
  6.     <title>Selector Escaping</title>
  7.     <script type='text/javascript'>
  8.     //<![CDATA[
  9.         $(function(){
  10.            $('#foo\\>').css('background', '#99ff99');
  11.            $('#\\<bar').css('background', '#99ff99');
  12.            $('#\\<buz\\>').css('background', '#99ff99');
  13.            $('#\\[qux\\]').css('background', '#99ff99');
  14.         });
  15.     //]]>
  16.     </script>
  17. </head>
  18. <body>   
  19.     <div id='foo&gt;'>#foo&gt;</div>
  20.     <div id='&lt;bar'>#&lt;bar</div>
  21.     <div id='&lt;buz&gt;'>#&lt;buz&gt;</div>
  22.     <div id='[qux]'>#[qux]</div>
  23. </body>
  24. </html>

According with official API reference, I escaped '<' and '>' characters in jQuery selector block.
As expected "#foo>" and "#<bar" are selected, but "#<buz>" isn't.
(I tested "#[buz]" for reference and it worked successfully.)

Where is wrong?