:parent Selector

Categories: Selectors > Content Filter | Selectors > jQuery Extensions

parent selector

version added: 1.0jQuery(':parent')

Description: Select all elements that are the parent of another element, including text nodes.

This is the inverse of :empty.

One important thing to note regarding the use of :parent (and :empty) is that child elements include text nodes.

The W3C recommends that the <p> element have at least one child node, even if that child is merely text (see http://www.w3.org/TR/html401/struct/text.html#edef-P). Some other elements, on the other hand, are empty (i.e. have no children) by definition: <input>, <img>, <br>, and <hr>, for example.

Additional Notes:

Because :parent is a jQuery extension and not part of the CSS specification, queries using :parent cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :parent to select elements, first select the elements using a pure CSS selector, then use .filter(":parent").

Example:

Finds all tds with children, including text.

<!DOCTYPE html>
<html>
<head>
  <style>
  td { width:40px; background:green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">

  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>

</table>
<script>$("td:parent").fadeTo(1500, 0.3);</script>

</body>
</html>

Demo:

Support and Contributions

Need help with :parent Selector or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to :parent Selector? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

Scott

This is an ambiguous description – I had to read this several times before I realized that the td:parent selector matches all TD elements that ARE PARENTS, rather than matching the parents of TD, ie a TR.

This, in my opinion, should be renamed something more descriptively correct, such as :hasChild
kk

i have the same idea with Scott, this selector should be renamed to :hasChild

Jakub Konecki

Or at least :isParent to keep it as similar to the current one as possible
ll

Or :children

ElMoonLite

if you are looking for the direct parent(s) of the item(s) in current selection:
use $(“someselection”).parent().dostuff

if you are looking for all ancestors of the item(s) in current selection:
use $(“someselection”).parents().dostuff
http://www.santoshkori.com Santosh Kori

what would be code if i want apply jquery function to Second Parent elelemt
Like

li > ul > li > a
On mouse over of “a” i want apply css to Parent first LI

Please guide on this

ElMoonLite

an answer on this common question:

“When I click or mouseover an element, I want something to happen to its parent, how do I do that?”

http://forum.jquery.com/topic/onevent-dosomething-to-parentelement-s-or-sister-elements

(this comment-board is not really the place to elaborate on parent/sibling/sister elements etc. , but I made a post on the forum to elaborate and show a simple and more extensive example, that should help you out enough)

ElMoonLite

an answer on this common question:

“When I click or mouseover an element, I want something to happen to its parent, how do I do that?”

http://forum.jquery.com/topic/…

(this comment-board is not really the place to elaborate on parent/sibling/sister elements etc. , but I made a post on the forum to elaborate and show a simple and more extensive example, that should help you out enough)

jQuery API