The jQuery :contains() selector selects the elements containing the specified matching text content. It can be useful when you want to filter the content from the group element. After selecting the elements, you can highlight them by adding a background color or any other effect.
jQuery :contains() Selector Syntax
The syntax of the jQuery :contains selector is given below.
It requires a single string argument which should be a string. The description of the argument is given below.
Parameter Description
| Sr No | Parameter Name | Description |
|---|---|---|
| 1 | text |
|
You can make it more clear with the examples given below.
use jQuery :contains() Selector to Select Table Cells
There are much contents in the cells of a table. You may want to select the cell items contains the matching text content. Background color is helpful to differentiate the matching items from other cells.
The below example is selecting only the cells contains the text ‘keeper’.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable td:contains(keeper)" ).css( "color", "orange" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; } </style> <p><button type="button" class="mybtn">Click to Color Matching Cell</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Bookkeeper</td> </tr> <tr> <td>2</td> <td>Housekeeper</td> </tr> <tr> <td>3</td> <td>Monitor</td> </tr> <tr> <td>4</td> <td>Tea Maker</td> </tr> <tr> <td>5</td> <td>Doorkeeper</td> </tr> <tr> <td>6</td> <td>New York</td> </tr> <tr> <td>7</td> <td>Boat</td> </tr> </table> |
Output
| Sr No | Name |
|---|---|
| 1 | Bookkeeper |
| 2 | Housekeeper |
| 3 | Monitor |
| 4 | Tea Maker |
| 5 | Doorkeeper |
| 6 | New York |
| 7 | Boat |
The above example contains the text content in the table and a button. When you click the button, it selects and applies the ‘orange’ color to the cell content contains the word ‘keeper’. You can apply a background color or other effects using jQuery.
Select Matching List Items Containing the Text Content
Suppose there are 8 list items and you want to select the items containing the text ‘maker’. You can use the selector as given in the example below. The example contains the list element and the button to select items on click.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $('.mylibtn').click(function(){ $( "ul.mylist li:contains(maker)" ).css( "color", "red" ); }); }); </script> <p><button type="button" class="mylibtn">Click to Color Matching List Items</button></p> <ul class="mylist"> <li>Shoemaker</li> <li>Coffeemaker</li> <li>Map Analysis</li> <li>Laser Printer</li> <li>Icemaker</li> <li>Mouse</li> <li>Monitor</li> <li>Carmaker</li> </ul> |
Output
- Shoemaker
- Coffeemaker
- Map Analysis
- Laser Printer
- Icemaker
- Mouse
- Monitor
- Carmaker
You have to click the button given in the example above to select the list items. It applies the ‘red’ color to the items contains the text ‘maker’.