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 AJAX Basics (retiring) AJAX and APIs Adding jQuery

Posted by gerardchin
gerardchin
16,144 Points

isn't this more appropriate and a better practice ? $(this).parent().siblings().children().removeClass("selected");

instead of his version?

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Gerard,

For the context of the challenge Dave's solution is perfectly fine as there is no conflicts by targeting all button elements in the DOM, your solution will work but is slightly too complex for what needs to be accomplished, in my experience the below code would suffice and result in much cleaner code as you could re-use it for several different situations.

var selClass = 'selected';

$('button').click(function() {
    // Remove the defined class name in the `selClass` variable on any sibling that has it set
    $(this).parents('.filter-select').find('.' + selClass).removeClass(selClass);

    // Add the selected class to the button that was clicked
    $(this).addClass(selClass);
});

One thing you may not have seen yet is the parents method which is very useful when working when using jQuery as it will search for the nearest parent with the specified id or class attribute value.

An alternate way to my example would be to use your example but slightly differently.

$(this).parent().siblings().find('.' + selClass).removeClass(selClass);

The only difference here is I've exchanged children for find which is master faster as jQuery won't need to iterate over each DOM element to remove a class that may not actually exist in the classList, of course these techniques come down to how comfortable you are with jQuery as a library but I recommend you don't get too attached and try to understand how this works using vanilla JS as you would be surprised as to how little work jQuery is actually doing with the help of the Sizzle engine.

Hope that helps.

Gavin Ralston
Gavin Ralston
28,770 Points
Gavin Ralston
Gavin Ralston
28,770 Points

Is there a reason not to look for the buttons this way, if you wanted to look for only picture filter buttons? (stuffing the css selector in a variable to make it a tiny bit more DRY I guess)

  $('.filter-select li button').click(function() {
    $('.filter-select li button').removeClass("selected");
    $(this).addClass("selected");

What would be the benefit of chaining a lot of jquery functions instead of just selecting it like this? Especially when it seems to me that they're both equally as 'brittle' if the menu structure changes

Ingvi Jonasson
Ingvi Jonasson
12,173 Points

Chris Upjohn would your example be faster or better performance than the one we see from the video. That is using $(this) instead of selecting again? Or is it the same thing?