What is the difference between .prev() , .prevAll() and .prevUntil() jQuery APIs ?

jQuery has made a drastic change in the way JavaScript are written. It has given more scripting power to the developers and the ability to “write less and do more” . Recently a friend of mine, who is a newbie Javascript developer, came across the .prev() , .prevAll() and the .prevUntil() APIs of jQuery. He was a little confused about what they do and when to use what. I realised that this would be a confusion for a lot of people out there who are beginning their journey with jQuery.

Anyway, to understand the usage of these three APIs, lets look at the following code first.

<ul class="daddyMummy">
<li class="brother1">Brother 1</li>
<li class="brother2">Brother 2</li>
<li class="sister">Sister</li>
<li class="me">Me</li>
<li class="brother3">Brother 3</li>
</ul>

We see that there is a <ul> element with <li> under it. Now from the DOM structure point of view; there is a <ul> with 5 Child <li> under it. Now as in any family, if there are more than one child, these Children will be siblings to each other. So my brother or sister would be my sibling and I would be a child to my parents and so will my siblings too.

Now Lets take a look at the definitions of the APIs.

.prev()

The jQuery’s documentation says that it is used to “Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.”

Which means that if I use this API on the <li> with class ‘me’ , it would get me the immediately preceding sibling , which is <li> with class ‘sister’.
I.e

$('li.me').prev();

would return a me the jQuery object jQuery(li.sister). So if I say

$('li.me').prev().css('background-color','yellow');

the <li class=”sister”>Data1</li> will get a yellow background assigned to it. The output would be

• Brother 1
• Brother 2
• Sister
• Me
• Brother 3

 .prevAll()

jQuery describes that .prevAll() is used to “Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.”

Which means that if I use this API on the <li> with class “me” , it would get me all the preceding siblings , which is <li> with class “sister” and two <li> with class “brother1” and “brother2”.
I.e

$('li.me').prevAll();

would return a me the jQuery object jQuery(li.sister, li.brother1, li.brother2) . So if I say

$('li.me').prevAll().css('background-color','lime');

all the preceding Siblings of <li class=’me’>Me</li> will get a background color. The output would be

• Brother 1
• Brother 2
• Sister
• Me
• Brother 3

.prevUntil()

jQuery describes that .prevUntil() is used to “Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.”

This means that if I use this API on the <li> with class ‘brother3’ without any filter , it would fetch me all the preceding <li> which are Me, Sister, Brother 2 and Brother 1.

But if we apply a selector to it, it would fetch me all the <li> till it encounters the <li> with the selector I have applied. For eg;

$('li.brother3').prevAll('li.brother2');

would fetch me all the preceding sibling <li> till ‘brother2’ but not including it.  I.e

it would return me jQuery(li.me, li.sister).
To further understand if we execute

$('li.brother3').prevAll('li.brother2').css('background-color','green');

we get the following output

• Brother 1
• Brother 2
• Sister
• Me
• Brother 3

I would suggest that you play around with these jQuery API to get more clear with it.

Please note that all these 3 APIs are used to get the sibling elements.

Happy Scripting 😉 !