jQuery

jQuery contains example

The aim of this example is to show you how to pick the DOM elements that contain a specific string. jQuery provides the :contains selector for this purpose.

The jQuery :contains('text') selector helps you to find the HTML elements containing the given text. The text can be contained directly in the element or in a child element.

For example, this statement $("div:contains('book')") picks the div elements containing the “book” word.

Let’s look at some examples. To download the jQuery library, click here.
 

1. HTML

First of all you need to create a simple html document.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Contains Example</title>
	<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<!-- HTML -->

</body>
</html>

2. jQuery contains examples

2.1 Finds all divs containing the ‘java’ word

Let’s add the following simple html code.

 
<div>java is a good programming language.</div><br/>
<div>spring is a great framework.</div><br/>
<div>development by java is really nice.</div><br/>
<a href="javascript:return 0" onclick="chageBackground()" >Change Backgrounds</a>

In the following jQuery code, the $("div:contains('java')") picks the div elements containing the “java” word.

 
<!-- JAVASCRIPT -->
<script type="text/javascript">
	function chageBackground(){
		$("div:contains('java')").css("background-color","#f00");	
	}	
</script>

The result in the browser would be:

Finds all divs containing a specific word
Finds all divs containing a specific word

2.2 Finds all divs containing one of some words

If we want to pick the HTML elements containing one of the some words, we can separate many of :contains selectors by the comma (,) operator.

Let’s add the following simple html code.

 
<div>java is a good programming language.</div><br/>
<div>spring is a great framework.</div><br/>
<div>development by java is really nice.</div><br/>
<a href="javascript:return 0" onclick="chageBackground()" >Change Backgrounds</a>
 
<!-- JAVASCRIPT -->
<script type="text/javascript">
	function chageBackground(){
		$("div:contains('nice'),div:contains('framework')").css("background-color","#e0e0e0");	
	}	
</script>

The result in the browser would be:

Finds all divs containing one of some words example
Finds all divs containing one of some words example

2.3 Finds all divs containing some words

If we want to pick the HTML elements containing some words, we need to concat many :contains selectors by the colon (:) operator.

Let’s add the following simple html code.

 
<div>java is a good programming language.</div><br/>
<div>spring is a great framework.</div><br/>
<div>development by java is really nice.</div><br/>
<a href="javascript:return 0" onclick="chageBackground()" >Change Backgrounds</a>
 
<!-- JAVASCRIPT -->
<script type="text/javascript">
	function chageBackground(){
			$("div:contains('java'):contains('nice')").each(function()
				{
					var html = $(this).html();
					alert(html);
				}
			);	
	}
</script>

The result in the browser would be:

Finds all divs containing some words example
Finds all divs containing some words example

3.Conclusion

Picking HTML elements according to their content is very easy with jQuery. jQuery provides the :contains('text') selector for picking HTML elements containing the given text directly or containing a child that has the given text.

4. Download

Download: You can download the full source code of this example here : jQuery contains example

Saeb Najim

Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button