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:
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:
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:
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
