Tilde in jQuery selector

Question

My understanding of the tilde's function in Javascript is that it performs a bitwise not operation (i.e. 1 becomes 0 and vice versa; 1000 becomes 0111). However, I've recently begun work on an existing project where my predecessor has included a lot of code like this:

var iValuation = $('div[class~="iValuation"]');

Can anyone tell me what the purpose of the tilde in this instance is? I've not come across it before and haven't been able to find any reference to it online.

Answer 1

Tiled used as selector means

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

which is not a JavaScript operator at all.

More from doc:

This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.

For example:

<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />

$('input[name~="man"]') will select only second input, because its attribute name is separated by space.

For detail see here

Answer 2

$ is the jQuery selector function, which contains a CSS3 Selector String: According to the CSS3 Selector Definition, the selector you encountered selects:

E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

in the DOM. Because the Tilde is wrapped in a string, it is not working as an operator.

Answer 3

In case you're wondering about the difference between

[class~="foo"]

and

[class*="foo"]

~ will match only with whitespace around (e.g. 'foo bar' but not 'foo-1')
* will match with or without whitespace around (e.g. 'foo bar' and 'foo-1')

~ - Attribute Spaced Selector
* - Attribute Contains Selector