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

Posted by Matt Bloomer
Matt Bloomer
10,608 Points

.siblings

Here is the code that I am working through:

//problem: no user interaction causes no change to application
//solution: when user interacts, causes change appropriately 
var color = $(".selected").css("background-color");

//when clicking on control list items, 
$(".controls").on("click", "li", function(){



  //deselect sibling elements
  $(this).siblings().removeClass("selected");

  //select clicked elements
  $(this).addClass("selected");

  //cache current color here
  color = $(this).css("background-color");


});

<!DOCTYPE html>
<html>
<head>
    <title>Simple Drawing Application</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <canvas width="600" height="400"></canvas>
    <div class="controls">
        <ul>
            <li class="red selected"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
        </ul>
        <button id="revealColorSelect">New Color</button>
        <div id="colorSelect">
            <span id="newColor"></span>
            <div class="sliders">
                <p>
                    <label for="red">Red</label>
                    <input id="red" name="red" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="green">Green</label>
                    <input id="green" name="green" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="blue">Blue</label>
                    <input id="blue" name="blue" type="range" min=0 max=255 value=0>
                </p>
            </div>
            <div>
            <button id="addNewColor">Add Color</button>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>    
</body>
</html>

I am having problems understanding what everything is referring to in the .js. What are the elements that the .siblings is pointing to? Are they the other colors? I have reviewed the videos and don't understand why we want to remove then add the class once again. Can someone walk me through this?

6 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

siblings() is a jQuery function which selects all similar elements (immediately related such as a brother or sister, but not parents or children) within the same DOM-tree level.

In this case, siblings are all the li tags within the .controls div. These are the colors. To clarify, the on click event handler selects the li that was clicked and then siblings() creates a collection of that element's brother/sisters.

We want to remove the class .selected from the li that has it currently. Using siblings() here we don't need to pinpoint the specific element which has this class ourselves with more code because the siblings() function will loop through all of the collection and if one ( or more ) has that class it is removed.

Following that, we add the class .selected to the li that was clicked. That is what $(this) is because $(this) becomes the element(s) ( it is only one element in this case ) which we specified with the on click event handler.

I hope that helps to clarify any confusion you may have. :)

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

I am still confused, but that has more to do with me than the quality of your answer. Thanks for the help.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

I am still confused [...]

Could you explain your confusion a little so we can help to lessen that for you?

Is it the chaining of commands? e.g. $(this).siblings().removeClass("selected"); -- everything with a 'dot' is a new jQuery function call which are run consecutively after the previous is finished, which in human terms means:

  • $(this) = a person, let's call that person Lisa ( for the li tag that was clicked )
  • .siblings() = put all of Lisa's sisters in a room together
  • .removeClass("selected") = for any of the sisters that are wearing a hat with the word 'selected' on it then take it off.

Then with the next line, $(this).addClass("selected");, we take the hat and put it on Lisa.

We have to keep in mind, from using the analogy above, that 'Lisa' will be whomever is chosen ( i.e. clicked ) in that instance of time. So, granted, it's not perfect, yet hopefully the point still comes across in a logical way.

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

Yes, that makes sense; thank you for your patience with a nube such as myself.

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

Another thing that you could clear up is when to and when not to use an unnamed function. Here is an example I pulled off of api.jquery.com:

1 2 3 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); });

Sean T. Unwin
Sean T. Unwin
28,690 Points

This is a good question and could be it's own thread.

A function without a name is called an Anonymous Function.

A function passed as a parameter to another function is called a Callback Function.

Usually an anonymous function is used as a callback function when that function will not be used again in your code. Multiple uses of the same function should have a name so that it can be reused and also that we keep our code DRY (Don't Repeat Yourself).

There is more that could be said about this, although there are a few terms mentioned here that you could research.

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

Thank you.