jQuery
jquery :contains() Selector Examples
The jQuery contains selector can be used to select all elements that contain the specified text. But in some cases, it may not be useful. In this article, we are going to see examples on how to get around this problem. I am going to share different ways of determining whether an elements (such as div, textbox, textarea, etc.) contains a specifc text, word, value, etc.
How to use the jQuery contains Selector
Let’s assume that we have few different elements on our web page such as div, paragraph, span, textbox, etc. We will see how to check if each of these elements contain a specified value or not. Here we go:
Common HTML source code for all the following examples:
<style type="text/css">
.yellow {
background-color: #FFFF99;
border: 1px solid #FF0;
}
.purple {
background-color: #9999FF;
border: 1px solid #90F;
}
.blue {
border: 1px solid #09F;
}
.red_text {
color: #D70000;
font-weight: bold;
}
.orange {
border: 10px solid #F90;
color: #FFF;
font-size: 200%;
font-weight:bold;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
.green {
background-color: #D7FFD7;
border: 1px solid #090;
}
.divs_container div {
padding: 10px;
margin: 10px;
}
</style>
<div class="divs_container">
<div id="my_div1" class="blue">This is MY DIV 1
<div id="my_div2" class="purple red_text">This is MY DIV 2
<div id="my_div3" class="yellow">This is MY DIV 3
<div id="my_div4" class="yellow">This is MY DIV 4</div>
</div>
<div id="my_div5" class="yellow">This is MY DIV 5</div>
</div>
<div id="my_div6" class="yellow">This is MY DIV 6</div>
</div>
<p id="my_para" class="yellow">This is a PARAGRAPH</p>
<p>
<span id="my_span" class="yellow">This is a SPAN</span>
</p>
<p>
<a id="my_link" href="http://www.theextremewebdesigns.com">This is Link to Extreme Web Designs</a>
</p>
<p>
<label for="first_name">Enter First Name</label>
<input name="first_name" type="text" id="first_name" value="John">
</p>
<p>
<label for="message">Enter Message</label>
<br>
<textarea name="message" id="message" cols="45" rows="5">This is default message.</textarea>
</p>
<p>
</p>
<p> </p>
</div>
<p>
<input type="submit" name="sbt_check_div_contains" id="sbt_check_div_contains" value="Check if DIV contains an Image">
<input type="submit" name="sbt_check_para_contains" id="sbt_check_para_contains" value="Check if PARA contains the text 'PARAGRAPH'">
<input type="submit" name="sbt_check_span_contains" id="sbt_check_span_contains" value="Check if SPAN contains the word 'span'">
<input type="submit" name="sbt_check_link_src_contains" id="sbt_check_link_src_contains" value="Check if Link Source contains the word 'extreme'">
<input type="submit" name="sbt_check_link_text_contains" id="sbt_check_link_text_contains" value="Check if Link Text contains the word 'extreme'">
<input type="submit" name="sbt_check_textbox_contains" id="sbt_check_textbox_contains" value="Check if Textbox value contains the word 'John'">
<input type="submit" name="sbt_check_textarea_contains" id="sbt_check_textarea_contains" value="Check if Textarea value contains the word 'Super'">
<input type="submit" name="sbt_check_string_contains" id="sbt_check_string_contains" value="Check if string contains the word 'Excellent' ">
<input type="submit" name="sbt_check_array_contains" id="sbt_check_array_contains" value="Check if ARRAY contains element 'Orange'">
<input type="submit" name="sbt_check_contains_class" id="sbt_check_contains_class" value="Check if MY DIV 1 contains Class 'red' ">
<input type="submit" name="sbt_check_not_contains" id="sbt_check_not_contains" value="Check if MY DIV 1 does NOT contain class 'blue' ">
</p>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Add jQuery code here
});
</script>Example 1: Check if a div contains an image when a button is clicked
$('#sbt_check_div_contains').on("click", function(e){
if( $('.divs_container #my_div1').find("img").length > 0 )
{
alert('DIV 1 contains an image.');
}
else
{
alert('DIV 1 DOES NOT contain an image.');
}
e.preventDefault();
});Example 2: Check if a paragraph tag contains the text ‘PARAGRAPH’ when a button is clicked
$('#sbt_check_para_contains').on("click", function(e){
if( $('.divs_container #my_para:contains("PARAGRAPH")') )
{
alert('Paragraph contains the text PARAGRAPH.');
}
else
{
alert('Paragraph DOES NOT contain the text PARAGRAPH.');
}
e.preventDefault();
});Example 3: Check if a span tag contains the text ‘span’ when a button is clicked
$('#sbt_check_span_contains').on("click", function(e){
if( $('.divs_container #my_span:contains("span")') )
{
alert('Span contains the text "span" (but in uppercase).');
}
else
{
alert('Span DOES NOT contain the text "span".');
}
e.preventDefault();
});Example 4: Check if a hyperlink href source contains the text ‘extreme’ when a button is clicked
$('#sbt_check_link_src_contains').on("click", function(e){
var link_src = $('#my_link').attr("href");
if (link_src.indexOf('extreme') != -1)
{
alert('Link Source contains the text "extreme"');
}
else
{
alert('Link Source DOES NOT contain the text "extreme".');
}
e.preventDefault();
});Example 5: Check if a hyperlink text contains the text ‘extreme’ when a button is clicked
$('#sbt_check_link_text_contains').on("click", function(e){
var link_text = $('#my_link').text();
if (link_text.indexOf('extreme') != -1)
{
alert('Link Text contains the text "extreme" as it is case-sensitive');
}
else
{
alert('Link Text DOES NOT contain the text "extreme".');
}
e.preventDefault();
});Example 6: Check if a textbox value contains the word ‘John’ when a button is clicked
$('#sbt_check_textbox_contains').on("click", function(e){
var textbox_val = $('#first_name').val();
if (textbox_val.indexOf('John') != -1)
{
alert('Textbox Value contains the text "John"');
}
else
{
alert('Textbox Value DOES NOT contain the text "John".');
}
e.preventDefault();
});Example 7: Check if a textbox value contains the word ‘Super’ when a button is clicked
$('#sbt_check_textarea_contains').on("click", function(e){
var textarea_val = $('#message').val();
if (textarea_val.indexOf('Super') != -1)
{
alert('Textarea Value contains the text "Super"');
}
else
{
alert('Textarea Value DOES NOT contain the text "Super".');
}
e.preventDefault();
});Example 8: Check if a String contains the word ‘Excellent’ when a button is clicked
$('#sbt_check_string_contains').on("click", function(e){
var my_string = 'This is a custom string.';
if (my_string.indexOf('Excellent') != -1)
{
alert('String contains the text "Excellent"');
}
else
{
alert('String DOES NOT contain the text "Excellent".');
}
e.preventDefault();
});Example 9: Check if an array contains the element/item/value ‘Orange’ when a button is clicked
$('#sbt_check_array_contains').on("click", function(e){
var fruits_array = new Array('Apple', 'Mango', 'Grapes');
var search_for = 'Orange';
if( $.inArray(search_for, fruits_array) > -1)
{
alert('Value "Orange" is available in Array.');
}
else
{
alert('Value "Orange" is NOT available in Array.');
}
e.preventDefault();
});Example 10: Check if My Div 1 contains the class ‘red’ when a button is clicked
$('#sbt_check_contains_class').on("click", function(e){
if( $('.divs_container #my_div1').hasClass('red') )
{
alert('My Div 1 has the "red" class.');
}
else
{
alert('My Div 1 DOES NOT has the "red" class.');
}
e.preventDefault();
});Example 11: Check if My Div 1 does NOT contain the class ‘blue’ when a button is clicked
$('#sbt_check_not_contains').on("click", function(e){
if( !$('.divs_container #my_div1').hasClass('blue') )
{
alert('My Div 1 DOES NOT has the "blue" class.');
}
else
{
alert('My Div 1 has "blue" class.');
}
e.preventDefault();
});That’s it!
Do you know of any other ways to use the jQuery :contains selector? Feel free to suggest by commenting below.