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 Introduction to jQuery DOM Traversal find(), prev(), and next()

Noah Fields
Noah Fields
13,985 Points
Posted by Noah Fields
Noah Fields
13,985 Points

JQuery- how to use next() method for challenge

My immediate thought upon the challenge being issued in this video is that I could traverse the DOM less by using the next() function for pet-name, pet-notes, and pet-species. However, I cannot quite figure out how to make such an idea work.

The relevant code is below (I'm not using a snapshot because the snippet is too small for that to be worthwhile):

$('#add-pet').on('click', function() {
  var $name = $('#pet-name');
  var $species = $name.next();
  var $notes = $('#pet-notes');

Presumably I would apply something similar to $notes once I got it working on $species. However, currently this does not work properly, and I've tried a few slightly different approaches as well. What's the proper way to use the next() function?

2 Answers

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

The full snapshot allowed me to replicate the issue, but it's actually visible in just this part of "post.html":

      <div class="six columns">
          <label for="pet-name">Pet Name</label>
          <input class="u-full-width" placeholder="Scruffy McGuffagin" id="pet-name" type="text">
      </div>

You can see here that the input with id "pet-name" is the last element in a div. So it actually has no "next". From the code I was expecting the inputs to be siblings, but they are nested in separate div's.

So one way to traverse from the name input to the select for species would be:

  var $species = $name.parent().next().children("select")
Noah Fields
Noah Fields
13,985 Points
Noah Fields
Noah Fields
13,985 Points

Ah, I see - thank you!

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

This code is incomplete; the part shown here looks good, but I'd need to see the HTML it is selecting from to be sure.

Noah Fields
Noah Fields
13,985 Points
Noah Fields
Noah Fields
13,985 Points

https://w.trhou.se/yxrmh9eazw

Here's a snapshot of the HTML for the page which the above code is associated with.

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

There is no "app.js' file in the workspace! That would certainly explain it not working.

If you have any problems after adding the file, be sure to make a fresh snapshot.

Noah Fields
Noah Fields
13,985 Points
Noah Fields
Noah Fields
13,985 Points

No, there is not, but that is because I only snapshotted the HTML. The actual working file includes app.js as well.

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

I did not know you could snapshot only part of a workspace! But to do a complete analysis, all the project code would need to be in the snapshot so the issue can be replicated.

Noah Fields
Noah Fields
13,985 Points
Noah Fields
Noah Fields
13,985 Points

https://w.trhou.se/lmwu171x4g

Here is the snapshot to the full code. Apologies for the inconvenience.