Attribute Contains Word [attr~="value"] JQ Home  <<  Selectors  <<  Attribute Contains Word [attr~="value"]

• <<    Attribute Contains Selector
• Attribute Ends With Selector     >>

Word match selector.

Shorthand version $('[attr~="value"]')

Description

The [attr~="value"] selector, selects all elements that have the specified attribute name with a value containing the specified word, delimited by spaces.

• The string entered for "value" is case sensitive.
• If you need to search on a substring use the Attribute Contains Selector instead.

Syntax

Parameters

Return

N/A.

Attribute Contains Word [attr~="value"] Examples Selectors  <<  Top

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');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    Attribute Contains Selector
• Attribute Ends With Selector     >>