Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Spoiler Revealer Perfect

Pauline Orr
Pauline Orr
15,321 Points
Posted by Pauline Orr
Pauline Orr
15,321 Points

I don't understand .prev()

I don't understand how the .prev() works. In the video, its supposed to show the spoiler of the previous button right but that's not what he does in practice. Can someone explain this to me as simply as possible.

4 Answers

Joshua Erskine
Joshua Erskine
7,706 Points
Joshua Erskine
Joshua Erskine
7,706 Points

This one was confusing. I ended up watching the HTML 'live' in Chrome DevTools. My commented code below:

// 1. Hide spoilers  
   // This :---->   <span style="display: inline;">Darth Vader .....ooo!</span>
$(".spoiler span").hide();  
   // Becomes : ----> <span style="display: none;">Darth Vader .....ooo!</span>

// 2. Add button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
    //  This is added to the end of every ".spoiler" class: ------> <button>Reveal Spoiler!</button>

// 3. Button PRESSED
$(".spoiler button").click(function(){
         $(this).prev().show();    // Whichever/(this) button was "clicked", 
                                       // then show(), prev() element :----> "display: none" becomes "display: inline"
         $(this).remove();        // 
//  (this) being a "relative" reference to the click, instead of a particular element.

Please correct me if I am wrong. :)

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Joshua:

You are right on point.

or in a another way: in the click function which is bound to .spoiler button (meaning when you click the button with that perticular class type "this" means the same as writing .spoiler button instead

// 3. Button PRESSED
$(".spoiler button").click(function(){
         $(this).prev().show();    // instead of $(this) you can write $(".spoiler button").prev().show()

         $(this).remove();

The scope if this important: when using "this" in a function thatn that "this" is only a part of that function -> when you use this in yet another function, than that this is refering only to that function.

Here is a link at MDN if you need more info on the keyword: MDN: this

Hope this helped a bit.

Rachelle Wood
Rachelle Wood
15,362 Points
Rachelle Wood
Rachelle Wood
15,362 Points

This is an old question but perhaps I can still reply because I had the same question and I just figured it out. You append a button element to the spoiler class in the html file, which means that it appears after the span element. To get the span element to show when you click on the button, you have to select that span specifically. Since you already specified the button element when defining the click event function, you use "this" to select it, but since you want to show the span which is the sibling element before the button element, you have to add .prev() to go to it. I hope this explanation helps others.

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi,

The prev() selects the first previous item in the DOM. Example: you have a unordered list with 5 items and the 3rd is selected, you could provide a button that selects the previous list items and applies some CSS rules to it.

Best way to clear these thing up go to the API site.

jQuery API:prev()

sibal gesekki
sibal gesekki
3,484 Points

theres a reason why we ask on the forums. we KNOW that there is an api man...

Katherine Wakefield
PLUS
Katherine Wakefield
Courses Plus Student 4,154 Points
Katherine Wakefield
Katherine Wakefield
Courses Plus Student 4,154 Points

Yeah, sorry I don't get it either and I don't feel this question was answered for this specific case - which is the $(this). The API is doing nothing for me except understanding a "true" previous element. $(this) is not a true previous. What I can only guess-timate is: This is previously clicked before going to the next one which is the second button - so don't go there. Stay previous to the next??