Hi folks,

Someone on Twitter just alerted me to an error in one of the attribute selectors: ~= . 

According to the W3C [1]: E[foo~="bar"]  an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar"

So given $('[class~=bar]') , the following should match: 

class="foo bar" , class="bar" , class= "baz foo bar"

but these should not match:

class="foobar" class="barfoo" class="foo barbaz"

Currently, jQuery is treating ~= the same as *= , which is clearly incorrect, in line 347 of selector.js:

(type == "*=" || type == "~=") && z.indexOf(m[5]) >= 0

I have a couple ideas for dealing with the two attribute selectors separately. I'm sure they can be improved on greatly. I'm interested in your thoughts:

1: Regular Expression:

// before the if statement: var sd = new RegExp('^(.* +)?' + m[5] + '( +.*)?$');

//within the if statement:

type == "*=" && z.indexOf(m[5]) >= 0 || type == "~=" && sd.test(z)

2. Array:

// within the if statement: type == "*=" && z.indexOf(m[5]) >= 0 || type == "~=" && jQuery.inArray(m[5],z.split(' ')) > -1

So, what do you think? Is it worth fixing this? Is there a better solution? 

 [1] http://www.w3.org/TR/css3-selectors/

--Karl