Attribute Contains Prefix [attr|="value"]S2C Home « Selectors « Attribute Contains Prefix [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 (-).
Syntax
| Signature | Description |
|---|---|
jQuery('[attr|="value"]') | Subcode 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 Prefix [attr|="value"] ExampleTop
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 (-).
Allows subcode matching that will match the value entered or that value with a hyphen and a subcode. For example en, EN-GB or en-us and is used primarily to handle language attributes.
A paragraph with a lang attribute and en subcode.
A paragraph with a lang attribute and nl subcode.
A paragraph with a lang attribute and en-us subcode.
A paragraph with a lang attribute and fr subcode.
A paragraph with a lang attribute and en-gb subcode.
The following example will select all 'p' nodes on the page that have a language attribute starting with 'en' and change the visible text to red.
$(function(){
$('#btn1').on('click', function() {
$('p[lang|="en"]').css('color', 'red');
});
});
The following example will select all 'p' nodes on the page that have a language attribute of 'en-us' and change the visible text to green.
$(function(){
$('#btn2').on('click', function() {
$('p[lang|="en-us"]').css('color', 'green');
});
});
This final example will select all 'p' nodes on the page that have a language attribute of 'en-gb' and change the visible text to purple.
$(function(){
$('#btn3').on('click', function() {
$('p[lang|="en-gb"]').css('color', 'purple');
});
});