Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.

This method is similar to .parents(), except .parent() only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a basic nested list on it:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<ulclass="level-1">

<liclass="item-i">I</li>

<liclass="item-ii">II

<ulclass="level-2">

<liclass="item-a">A</li>

<liclass="item-b">B

<ulclass="level-3">

<liclass="item-1">1</li>

<liclass="item-2">2</li>

<liclass="item-3">3</li>

</ul>

</li>

<liclass="item-c">C</li>

</ul>

</li>

<liclass="item-iii">III</li>

</ul>

If we begin at item A, we can find its parents:

1

$( "li.item-a" ).parent().css( "background-color", "red" );

The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.

Examples:

Example: Shows the parent of each element as (parent > child). Check the View Source to see the raw html.

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

<!doctype html>

<htmllang="en">

<head>

<metacharset="utf-8">

<title>parent demo</title>

<style>

div, p{

margin:10px;

}

</style>

<scriptsrc="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<div>div,

<span>span, </span>

<b>b </b>

</div>

<p>p,

<span>span,

<em>em </em>

</span>

</p>

<div>div,

<strong>strong,

<span>span, </span>

<em>em,

<b>b, </b>

</em>

</strong>

<b>b </b>

</div>

<script>

$( "*", document.body ).each(function() {

var parentTag = $( this ).parent().get( 0 ).tagName;

$( this ).prepend( document.createTextNode( parentTag + " > " ) );

});

</script>

</body>

</html>

Demo:

Example: Find the parent element of each paragraph with a class "selected".