:contains() JQ Home  <<  Selectors  <<  :contains()

• <<    :only-of-type Selector
• :empty Selector     >>

Containing text selector.

Shorthand version $(':contains(text)')

Description

The :contains() selector, selects all elements containing the specified text.

• The text can appear in the specified element and/or descendants thereof.

Syntax

Parameters

Return

N/A.

:contains() Examples Selectors  <<  Top

Selects all elements containing the specified text.

The following example will check for the text 'the' in 'p' elements and apply an orange background when the button below is clicked.

$(function(){
  $('#btn1').on('click', function() {
    $("p:contains('the')").css('backgroundColor', 'orange');
  });
}); 

The following example will check for the text 'only' in 'a' elements and apply a silver background when the button below is clicked (left sidebar and left navigation).

$(function(){
  $('#btn2').on('click', function() {
    $("a:contains('only')").css('backgroundColor', 'silver');
  });
}); 

The following example will check for the text 'orm' in 'span' elements and apply a cyan background when the button below is clicked (left sidebar and below).

$(function(){
  $('#btn3').on('click', function() {
    $("span:contains('orm')").css('backgroundColor', 'cyan');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    :only-of-type Selector
• :empty Selector     >>