Updated April 1, 2023
Introduction to jQuery contain
The contains() is predefined selector in jQuery, which is used to select the elements with specified string in the contains selector. This specified string contained directly within the element as plain text or in the child element. This contains() selector used to combine with other selector to select the elements which are containing the text in the group.
Real-Time Example: Let suppose we have lot of content and if there is situation we have to apply CSS styles for specific paragraph or header or footer text then we no need to check with the entire content, but we can check with one unique keyword from content and apply the contains() selector. Instead of checking all the content and apply the style we can just check with single string and apply the CSS styles.
How does contains() Selector work in jQuery?
JQuery contains() selector that can be applied with paragraph content, header content, footer content etc. to apply any required styles to the content.
Syntax:
$(":contains(text)").css("apply styles here");Syntax Explanation:
- Accepted Parameters: This contains() selector allows only single parameter within the selector which is compulsory to find the text and apply the desires styles.
- Return Values: If specified text within contains() selector is available then it return true boolean value and apply the styles. If not the specified text within the contains() selector then it return false boolean value and styles can’t be applied.
Note: Make it work jQuery application we must import this script in html file
<script src=”https://ajax.googleapis.com/“></script>
Examples
Given below are the examples:
Example #1
Apply CSS Styles to the Paragraph content if it contains given word .
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :contains() Selector</title>
<!--imprting jQuery library-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--CSS Styles-->
<style>
h1,h2{
text-align:center
}
h1
{
color:blue;
}
h2
{
color:maroon;
}
h3
{
color:lightblue;
text-decoration: underline;
}
</style>
</head>
<body>
<h1 id="geeks1" style = "color:green;">EDUCBA Content Description</h1>
<h2 id="geeks2">Contains() selecctor with Paragraph content and it's CSS Styles</h2>
<h3>See the content of paragraphs</h3>
<div id="choose">
<p>The contains() is predefined selector in jQuey, which is used to select the elements with specified string in the contains selector.</p>
<p> This specified string can contained directly within the element as plain text or in the child element. </p>
<p>This contains () selector used to combine with other selector to select the elements which are containing the text in the group. </p>
<p>Let suppose we have lot of content and if there is situvation we have to apply CSS styles for specific paragraph or header or footer text then we no need to check with the entire content, but we can check with one unique keyword from content and apply the contains() selector. </p>
</div>
<!-- jQuery logic-->
<script>
$(document).ready(function(){ //performs ready action
$("p:contains(predefined)").css("background-color", "navy"); //apply background color to paragraph if it contains predefined
$("p:contains(predefined)").css("font-size", "25px"); //apply font-size to paragraph if it contains predefined
$("p:contains(predefined)").css("color","white"); //apply color to paragraph if it contains predefined
$("p:contains(suppose)").css("background-color", "blue");//apply background color to paragraph if it contains suppose
$("p:contains(suppose)").css("color","white"); //apply color to paragraph if it contains suppose
$("p:contains(suppose)").css("font-size", "25px"); //apply font size to paragraph if it contains suppose
});
</script>
</body>
</html>Output:
Explanation:
- As you can see in the above paragraphs, if the provided word found in the contains selector then CSS styles like background color, font-size and text color properties applied and rest of the paragraphs does not applied with any CSS styles.
Example #2
Apply CSS Styles to the Paragraph content if it contains given word.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :contains() Selector</title>
<!--imprting jQuery library-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--CSS Styles-->
<style>
h1{
text-align:center;
color:blue;
}
h3
{
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1 >EDUCBA Content Description</h1>
<h1 >Contains() selecctor with Header content and it's CSS Styles</h2>
<h3>See the content of headers</h3>
<div>
<h2>The contains() is predefined selector in jQuey, which is used to select the elements with specified string in the contains selector.</h2>
<h2> This specified string can contained directly within the element as plain text or in the child element. </h2>
<h2>This contains () selector used to combine with other selector to select the elements which are containing the text in the group. </h2>
<h2>Let suppose we have lot of content and if there is situation we have to apply CSS styles for specific paragraph or header or footer text then we no need to check with the entire content, but we can check with one unique keyword from content and apply the contains() selector. </h2>
</div>
<!-- jQuery logic-->
<script>
$(document).ready(function(){ //performs ready action
$("h2:contains(predefined)").css("border-style", "solid"); //apply border style to the header if it contains predefined
$("h2:contains(predefined)").css("border-color", "maroon"); //apply border color to the header if it contains predefined
$("h2:contains(predefined)").css("border-width","3px"); //apply border width to the header if it contains predefined
$("h2:contains(predefined)").css("color","green");//applytext color to the header if it contains predefined
$("h2:contains(specified)").css("border-style", "solid"); //apply border style to the header if it contains specified
$("h2:contains(specified)").css("border-color", "brown"); //apply border color to the header if it contains specified
$("h2:contains(specified)").css("border-width","4px"); //apply border width to the header if it contains specified
$("h2:contains(specified)").css("color","red");//applytext color to the header if it contains specified
$("h2:contains(group)").css("border-style", "solid"); //apply border style to the header if it contains group
$("h2:contains(group)").css("border-color", "navy"); //apply border color to the header if it contains group
$("h2:contains(group)").css("border-width","5px"); //apply border width to the header if it contains group
$("h2:contains(group)").css("color","orange");//applytext color to the header if it contains group
//does not apply CSS styles because it does not contains hello property in the any header tags
$("h2:contains(hello)").css("border-style", "solid");
$("h2:contains(hello)").css("border-color", "navy");
$("h2:contains(hello)").css("border-width","5px");
$("h2:contains(hello)").css("color","orange");
});
</script>
</body>
</html>Output:
Example #3
Apply CSS Styles to the Paragraph content if it contains given word.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :contains() Selector</title>
<!--imprting jQuery library-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--CSS Styles-->
<style>
h1{
text-align:center;
color:brown;
}
</style>
</head>
<body>
<h1 >EDUCBA Content Description</h1>
<h1 >Contains() selecctor with button content and it's CSS Styles</h2>
<div>
<button>Hi, I am first button</button>
<br>
<br>
<button>Hi, I am second button</button>
<br>
<br>
<button>Hi, I am third button</button>
<br>
<br>
<button>Hi, I am fourth button</button>
<br>
<br>
<button>Hi, I am fifth button</button>
</div>
<!-- jQuery logic-->
<script>
$(document).ready(function(){ //performs ready action
$("button:contains(button)").css("color","white");//apply text color to the button if it contains button keyword
$("button:contains(button)").css("background-color","red");//apply background color to the button if it contains button keyword
$("button:contains(button)").css("font-weight","bold");//apply fnt weight to the button if it contains button keyword
});
</script>
</body>
</html>Output:
Conclusion
jQuery contains() selector first search for provided word or sentence and if there is any CSS styles to be applied then it is applied. If no word or sentence is not found it does not apply any CSS styles. jQuery contains() selector content is case sensitive.
Recommended Articles
This is a guide to jQuery contains. Here we discuss the introduction to jQuery contains with respective examples for better understanding. You may also have a look at the following articles to learn more –
