Attribute Contains [attr*="value"]S2C Home « Selectors « Attribute Contains [attr*="value"]
Substring match selector.
Shorthand version $('[attr*="value"]')
Description
The [attr*="value"] selector, selects all elements with the specified attribute name and a value containing the specified string.
- The string entered for "value" is case sensitive.
- If you need to search on a full word use the Attribute Contains Word Selector instead.
Syntax
| Signature | Description |
|---|---|
jQuery('[attr*="value"]') | Substring 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 [attr*="value"] ExamplesTop
Selects all elements with the specified attribute name and a value containing the specified string.
The following example will select 'input' elements on the page that have a value attribute containing the substring 'urn' and change their background color to orange or yellow (look at the two buttons below).
$(function(){
$('#btn1').on('click', function() {
$('input[value*="urn"]').css('backgroundColor', 'orange');
});
$('#btn2').on('click', function() {
$('input[value*="urn"]').css('backgroundColor', 'yellow');
});
});
The following example will select 'option' elements within the form that have a value attribute containing the substring 's' or 'S' (case senstive) and change their background color 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 substring 's' (square) will have its background changed to orange.
When we press the right button any option value containing the substring 'S' (Star) will have its background changed to yellow.
$(function(){
$('#btn3').on('click', function() {
$('option[value*="s"]').css('backgroundColor', 'orange');
});
$('#btn4').on('click', function() {
$('option[value*="S"]').css('backgroundColor', 'yellow');
});
});
Related Tutorials
jQuery Basic Tutorials - Lesson 3 - CSS Selectors