The jQuery :has() selector select the elements that contain one or more matching specified element inside them. If you want to find only the elements that contain the matching elements, you can use the selector.
Syntax of jQuery :has() Selector
There is two syntaxes for the selector which are given below. The first syntax used to select only the single matching elements. However, you can select multiple matching elements using the second syntax given for multiple selectors.
For Single Selector
The above syntax selects the element matching with the single specified element.
For Multiple Selector
The above syntax selects the elements matching with the multiple specified element.
Parameter Description
| Sr No | Parameter Name | Description |
|---|---|---|
| 1 | selector |
|
Let it be more clear with the example given below for the single and the multiple selectors.
jQuery :has() Selector Select Single Matching Element Inside
Suppose you want to select the table cells that contain the HTML span element. You have to use the selector and specify the element to select the matching cells. It will be easy for you to identify the cells that contain the span element.
The below example selects the matching cells on button click.
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 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable td:has(span)" ).css( "background", "yellow" ); }); }); </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 Find Empty Cell</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Name</th> <th>Language</th> </tr> <tr> <td>1</td> <td><span>Java</span></td> <td>Programming Language</td> </tr> <tr> <td>2</td> <td>C++</td> <td>Programming Language</td> </tr> <tr> <td>3</td> <td>SQL(Structured Query Language)</td> <td><span>Query Language</span></td> </tr> <tr> <td>4</td> <td>PHP(Preprocessor Hypertext)</td> <td>Programming Language</td> </tr> <tr> <td>5</td> <td><span>HTML(Hypertext Markup Language)</span></td> <td>Markup Language</td> </tr> </table> |
Output
| Sr No | Name | Language |
|---|---|---|
| 1 | Java | Programming Language |
| 2 | C++ | Programming Language |
| 3 | SQL(Structured Query Language) | Query Language |
| 4 | PHP(Preprocessor Hypertext) | Programming Language |
| 5 | HTML(Hypertext Markup Language) | Markup Language |
The above example contains the table and the button. If you check the element, you cannot find out the cells that contains the span tag. Just click the button given above to highlight the cells. It applies the ‘yellow’ color to the matching cell items.
Select All Elements with Multiple Matching Element Inside
If you want to select the elements with multiple matching elements inside of them. You have to use the example given below using jQuery :has() Selector. It selects the paragraphs that contain the HTML span and HTML em tag.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mybtnhas').click(function(){ $( ".div-findhas p:has(span, em)" ).addClass("mybgin"); }); }); </script> <style> .mybgin{ background: orange; } </style> <p><button type="button" class="mybtnhas">Click to Find Empty Item</button></p> <div class="div-findhas"> <p>Welcome to our website Tutorialdeep!</p> <p><span>Learn from live examples and codes.</span></p> <p>Add effects to your using jQuery</p> <p><em>Use codes anywhere on your project.</em></p> </div> |
Output
Welcome to our website Tutorialdeep!
Learn from live examples and codes.
Add effects to your using jQuery
Use codes anywhere on your project.
There are four paragraphs in the above example. You don’t have an idea about which paragraph contains the span and the em tag. Click the button to highlight the matching paragraphs containing span and em tags. This is the way you can use the jQuery :has() Selector.