Attribute Contains Prefix [attr|="value"] JQ Home  <<  Selectors  <<  Attribute Contains Prefix [attr|="value"]

• <<    selectors
• Attribute Contains Selector     >>

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

Parameters

Return

N/A.

Attribute Contains Prefix [attr|="value"] Examples Selectors  <<  Top

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

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    selectors
• Attribute Contains Selector     >>