Attribute Contains Word Selector [name~="value"]

Categories: Selectors > Attribute

attributeContainsWord selector

version added: 1.0jQuery('[attribute~="value"]')

attribute

An attribute name.

value

An attribute value. Can be either an unquoted single word or a quoted string.

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

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.

Example:

Finds all inputs with a name attribute that contains the word 'man' and sets the value with some text.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="man-news" />

  <input name="milk man" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>

</body>
</html>

Demo:

Support and Contributions

Need help with Attribute Contains Word Selector [name~="value"] or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to Attribute Contains Word Selector [name~="value"]? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

Dave

How do you select elements that don't contain the given word…?

Glenshadow

Probably some use of 'not', not sure on exact code though. Anyone?

Colt Pini

$('.class').not('.class:contains(text)')

but I don't know what that would have to do with the ~= selector. so this should probably go somewhere else.

jmp909

in some languages (such as Lua) ~= means “not equal to”, so it's worth mentioning here

Quiff

$('.class:not([name~="text"])')

http://EpicScene.Com EpicScene

Use the != or :not constructs

e.g. input[name!=man]“).val(“mr. man is in it!”);

For more information see: http://api.jquery.com/attribute-not-equal-selector
Colt Pini

$('.class').not('.class:contains(text)')

but I don't know what that would have to do with the ~= selector. so this should probably go somewhere else.
cloud

Hello I've been trying to use a variable as the value of this selector but it doesn't seem to work,
$(“a”).click(function() {
var value= $(this).text();
$('span[wit~="'+value+'"]').css(“color”,”red”);
alert(value);
});
while having the attribute “wit” on “span” objects.
The alert shows that the variable “value” contains indeed the text it's supposed to do, I've also tried
$(“a”).click(function() {
var value= $(this).text();
var val=”dublin”;
$('span[wit~="'+val+'"]').css(“color”,”red”);
alert(value);
});
to check if the syntax was right and it works fine this way. I should point out that I've included this code in an xlst style sheet which produces the “a” and “span” objects by parsing an xml file but I don't think that's the problem since the alert shows that the variable gets the correct string.
Any suggestion?

jQuery API

Attribute Contains Word Selector [name~="value"]