Difference between jQuery parent() and parents() methods

In this post, we will see what is the difference between parent() and parents() methods. To understand this, let's look at the below given html code.
    <form id="form1" runat="server">
    <div id="dvParent">
        <div id="dvChild">
            <p><span id="spnText">jQuery By Example Rocks!!!</span> </p>
As you see there 2 divs, 1 p and 1 span tag within the html code.

When you make a call to parent() function like
will give you "P" as the output.parent() function selects the first parent in the DOM tree.

Now,if you call to parents() function like
will give you all parents in DOM tree which are, p->dvChild->dvParent->form->body->html.

You can pass a filter in parents() function to select specific parent like if you want to select both the divs then
The basic difference is the parent() function travels only one level in the DOM tree, where parents() function search through the whole DOM tree.

See live Demo and Code

Feel free to contact me for any help related to jQuery. I will gladly help you.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..