FAQ: Traversing the DOM - Parent & Siblings

Community%20FAQs%20on%20Codecademy%20Exercises

This community-built FAQ covers the “Parent & Siblings” exercise from the lesson “Traversing the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to jQuery

FAQs on the exercise Parent & Siblings

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Not that it is needed here, but on step 1 the hint is missing.

2 Likes

You should click the Get Help link at the bottom right, and submit a bug report.
Happy coding!

1 Like

In the example, why you used (this) instead of (event.currentTarget)?

The differences between these two aren’t so clear to me.

Thanks for your help!

2 Likes

Is this the example you are referring to:

$('.choice').on('click', event => {

  $(this).siblings().removeClass('selected');

  $(event.currentTarget).addClass('selected');
});

In the code above, the .siblings() method targets elements adjacent to the clicked '.choice' and removes the 'selected' class from any previously clicked '.choice' s. Then the 'selected' class is added only to the clicked '.choice' .

The above is from the instruction panel for this lesson: https://www.codecademy.com/courses/learn-jquery/lessons/traversing-the-dom/exercises/siblings-parent

Assuming this is what you are referring to, you have raised an excellent question. Someone else please correct me if I’m wrong, but the code in the example would not work as expected. The example uses arrow function syntax which means this does not refer to the DOM element that was clicked. The example should use $(event.currentTarget) in place of $(this).

Yes, this is the example I’m referring to.

I suppose the same, the example should use $(event.currentTarget) in place of $(this). I tried to do that but doesn’t work. That’s the reason of my question.

Thanks for you answer.

Could you post the code that you tried that isn’t working? I just replaced $(this) with $(event.currentTarget) in my code, and it works fine:

  $('.product-photo').on('mouseenter', function() {
    $(event.currentTarget).addClass('photo-active');
  }).on('mouseleave', function() {
    $(event.currentTarget).removeClass('photo-active');
  });

$(this) was working since the function doesn’t use arrow syntax, but the above code works just as well.

  $('.product-photo').on('mouseenter', () => {
    $(event.currentTarget).addClass('photo-active');
  }).on('mouseleave', () => {
    $(event.currentTarget).removeClass('photo-active');
  });

The above code also works using the anonymous arrow function, but the below code does not:

  $('.product-photo').on('mouseenter', () => {
    $(this).addClass('photo-active');
  }).on('mouseleave', () => {
    $(this).removeClass('photo-active');
  });

This code doesn’t work because of the behavior of $(this) inside an arrow function.

1 Like

36

That’s the code I’m referring to, it’s the last example in your reply.

In fact, I tried to use ‘function()’ instead of arrow syntax and it works.

Thank you for spending time with this.

1 Like

Someone mentioned this over a year ago and it still isn’t fixed. Surely it doesn’t take longer than a few hours to fix something like this?

1 Like

Not unexpected from Codecademy, there are loads of issues like this (and bigger ones too!) that don’t ever seem to get fixed…

I’m on the SASS lesson currently and it’s full of bugs

@brabli @robgit28 Weird. I submitted a bug for the Emojicode Course and it was fixed in a day. :confused: