jQuery Tutorial Tutorials - jQuery :parent selector

The jQuery :parent selector is used to select the element that has at least one child elements. It's the inverse of :empty selector.

jQuery :parent selector Syntax

$(':parent')

jQuery :parent selector Examples

Following is a simple example which would find out all elements that have at least one child element or text node:

<table>
<thead>
    <tr><th>Col Header</th><th>Col Header</th></tr>
</thead>
<tbody>
    <tr><td>Row1 Col1</td><td>Row1 Col2</td></tr>
    <tr><td>Row2 Col1</td><td></td></tr>
    <tr><td>Row3 Col1</td><td>Row3 Col2</td></tr>
    <tr><td></td><td>Row4 Col2</td></tr>
    <tr><td>Row5 Col1</td><td>Row5 Col2</td></tr>
</tbody>    
</table>

<script>
    $('td:parent').css('background-color','yellow');
</script>

Try it

Compare with :empty selector

<table>
<thead>
    <tr><th>Col Header</th><th>Col Header</th></tr>
</thead>
<tbody>
    <tr><td>Row1 Col1</td><td>Row1 Col2</td></tr>
    <tr><td>Row2 Col1</td><td></td></tr>
    <tr><td>Row3 Col1</td><td>Row3 Col2</td></tr>
    <tr><td></td><td>Row4 Col2</td></tr>
    <tr><td>Row5 Col1</td><td>Row5 Col2</td></tr>
</tbody>    
</table>

<script>
    $('td:empty').css('background-color','yellow');
</script>

Try it