Attribute Contains Word [attr~="value"]S2C Home « Selectors « Attribute Contains Word [attr~="value"]
Subcode match selector.
Shorthand version $('[attr~="value"]')
Description
The [attr~="value"] selector, selects all elements with the specified attribute name and a value equal to the specified string or prefixed with that string followed by a hyphen (-).
- The string entered for "value" is case sensitive.
- If you need to search on a substring use the Attribute Contains Selector instead.
Syntax
| Signature | Description |
|---|---|
jQuery('[attr~="value"]') | Word match |
Parameters
| Parameter | Description |
|---|---|
attr | The attribute name. |
value | The attribute value which can be either an unquoted single word or a quoted string. |
Return
N/A.
Attribute Contains Word [attr~="value"] ExamplesTop
Selects all elements that have the specified attribute name with a value containing the specified word, delimited by spaces.
The following example will select 'input' elements on the page that have a value attribute containing the word 'Turn' and change their background color to orange or yellow (look at the two buttons below).
$(function(){
$('#btn1').on('click', function() {
$('input[value~="Turn"]').css('backgroundColor', 'orange');
});
$('#btn2').on('click', function() {
$('input[value~="Turn"]').css('backgroundColor', 'yellow');
});
});
The following example will select 'option' elements within the form that have a value attribute containing the words 'square' and 'Star' (case senstive) and change their background colors to orange and yellow respectively.
Look at the 'Select a pie shape:' options before and after pressing the buttons below.
When we press the left button any option value containing the word 'square' will have its background changed to orange.
When we press the right button any option value containing the word 'Star' will have its background changed to yellow.
$(function(){
$('#btn3').on('click', function() {
$('option[value~="square"]').css('backgroundColor', 'orange');
});
$('#btn4').on('click', function() {
$('option[value~="Star"]').css('backgroundColor', 'yellow');
});
});