What is the use of parent () in jQuery?

Answer 1

This jQuery function finds the direct HTML DOM parent of an existing item.

Re-Using the example from jQuery's own documentation (https://api.jquery.com/parent/), if your HTML looks like this:

<ul class="level-1">

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

<li class="item-ii">II

<ul class="level-2">

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

<li class="item-b">B

<ul class="level-3">

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

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

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

</ul>

</li>

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

</ul>

</li>

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

</ul>

If we ask for the parent of a specific element $("li.item-a").parent() we get the jQuery object for the

<ul class="level-2">.

The parent() function can also take a filter selector argument which only finds the parent IF the parent matches the selector. So, if we asked for

$( "li.item-c" ).parent(".abc"),

no value would be returned since the parent of that element does not have that class.

When would you use this? For example, if you have generated a list like the one above based on data from a back-end and want to find the parent element of a specific user chosen list item so that you could highlight that part of the list, or get the container's data so you could then manipulate all the child members, then parent() if very useful.

I have used it when my parent DOM element contains some attributes that apply to each contained list item, and I need that attribute, for a decision.