The jQuery :parent selector selects all the elements containing at least one element or text content. If you want to find the element that contains no other element or text content inside, you can use this selector.
Syntax of jQuery :parent() Selector
the syntax of the jQuery :parent selector is given below.
There is no parameter to specify for the selector. If you want to select only the specified content with the tag name. You can use the tag name, class name or id of the element before the selector.
Let’s make it more clear with the live examples given below.
jQuery :parent() Selector Select Parent Table Cells
if you want to highlight the table cells that contain at least one element or text inside. You can use the below example which applies the background color to only the selected elements. The example uses the click event of jQuery. However, you can use the example without using the click event.
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 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable td:parent" ).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 Parent Cells</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Bluetooth</td> </tr> <tr> <td>2</td> <td>Wi-Fi</td> </tr> <tr> <td>3</td> <td><span></span></td> </tr> <tr> <td>4</td> <td>Lan Cable</td> </tr> <tr> <td>5</td> <td></td> </tr> </table> |
Output
| Sr No | Name |
|---|---|
| 1 | Bluetooth |
| 2 | Wi-Fi |
| 3 | |
| 4 | Lan Cable |
| 5 |
when you click the button given in the example above. it applies the background color ‘orange’ to the elements that contain another element, including the text content inside.
There are five rows with two cells contains nor text content. However, the third cell contains at least one element which is the HTML span. That’s why the selector also selects the third cell of the table to highlight.
Select All the Parent Elements in a List
In addition to the above example of the table, you can also use it with other elements like a list. It highlights the list items that contain at least one element or list content inside.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $('.mybtnli').click(function(){ $( ".ulmylist li:parent" ).css("background", "orange"); }); }); </script> <p><button type="button" class="mybtnli">Click to Find Parent Items</button></p> <ul class="ulmylist"> <li>This is Tutorialdeep!</li> <li>Learn Web Development with live examples.</li> <li></li> <li><em></em></li> </ul> |
Output
- This is Tutorialdeep!
- Learn Web Development with live examples.
There are five list items with two list items contains no text content. However, the last list item contains at least one element inside. The jQuery :parent selector select all the list items except the third one.
The selector selects all the elements including the last list item because it contains at least an HTML em tag element inside. It applies the background ‘orange’ color to the selected list items.