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 Password Confirmation Form Perform: Part 1

Posted by anatskiy
anatskiy
7,940 Points

Problem with next() method

Hi everybody.

I'm working on my own project following the jQuery course. I have a problem with next(): it's simply returns wrong DOM element.

This is a piece of HTML layout:

<div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="password" name="password">
        <span class="reg-span">Enter a password longer than 8 characters</span>
    </div>
</div>

Code from the video:

// Hide hints
$("form span").hide();

function passwordEvent() {
    //Find out if password is valid
    if ($(this).val().length > 8) {
        // Hide hint if valid
        $(this).next().hide();
    } else {
        // Show hint
        $(this).next().show();
    }
}

//When event happens on password input
$("#password").focus(passwordEvent).keyup(passwordEvent);

Output from the console:

> $("#password").next()
[<label class=?"checkbox-inline">?…?</label>?]

It must return span instead of label!

Where's the mistake?

1 Answer

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Try 

$("#password").next(".reg-span");
anatskiy
anatskiy
7,940 Points

Nope, still not working.

> $("#password").next(".reg-span")
[]