Can I put a single quote in a JQuery attribute equals selector ([attribute=value])?

Question

My Html looks like this:

        <a href="#" id="QuoteTest">Click Here</a>
        <ul>
            <li title="this" style="position:relative">one</li>
            <li title="this" style="position:relative">two</li>
            <li title="tha't" style="position:relative" >three</li>
            <li title="tha't" style="position:relative">four</li>
         </ul>

Jquery:

$('a#QuoteTest').click(function() {
    $('li[title=this]').animate({ 'left': '+=40px' }, 'slow');
    $("li[title=tha't]").animate({ 'top': '+=40px' }, 'slow');
});

I can't get the selector to work with a single quote in it. I tried escaping the quote with a, "\", backslash but that didn't help.

Any ideas?

Thanks.

Answer 1

Try two

$("li[title=tha\\'t]").animate({ 'top': '+=40px' }, 'slow');

Answer 2

I think you need a double backslash, oddly enough. Something about how jQuery escapes those strings. So you'd have:

$("li[title=tha\\'t]").animate({ 'top': '+=40px' }, 'slow');

That's been the case in other situations. Let me know if that works this time.

Answer 3

None of these worked for me in IE, so I had to use filter():

$("li").filter(function(index){
    return $(this).attr("title") == "tha\'t"; 
})
.animate({ 'top':'+=40px' }, 'slow');