Traversing the DOM:

We can traverse the HTML tree in jQuery using different commands:

1. Up and Down:
1. Up:

.parent()

Let the console return the parents of all the elements with class name .sub-menu-link:

Open console and click me

Let the console return the parents of all the elements with class name .jQuery-one

Open console and click me

Similarly, we can look for grandparent elements by chaining:

.parent().parent()

Open console and click me



2. Down:

.children()

Let the console return the direct children of all the elements with class name .new-dropdown-menu:

Open console and click me

In the console, we can see that we have returned ALL the elements and all their tags that are children of the class.

.children("p")

Let the console return the paragraph tags of all the elements with class name .new-dropdown-menu

Open console and click me

Similarly, we can look for grandchildren elements by chaining:

.children("div").children("a")

Here, we are looking for <div> children with <a> children of their own:

Open console and click me


2. Sideways:
1. Next:

.next()

Return the next element in the DOM tree:

Open console and click me

Return the next <div> element in the DOM tree (not the next element in the selection):

Open console and click me
2. Previous:

.prev()

Return the previous element in the DOM tree:

Open console and click me

Return the previous <div> element in the DOM tree (not the previous element in the selection):

Open console and click me
3. First:

.first()

Return the first element in the selection:

Open console and click me
4. Second:

.first().next()

Return the first then next (i.e., the second) element in the selection:

Open console and click me

From here we can keep chaining more .next()s until:

5. Last:

.last()

Return the last element in the selection:

Open console and click me
6. Siblings:

.siblings()

Return the sibling elements in the selection:

Open console and click me


3. Filtering:

.filter()

Allows us to filter things out:

The above code block keeps only class .dropdown-menu-no-children within class .new-dropdown-menu

Open console and click me

So, for example, if we then wanted to color the text of the filtered class yellow, we could do this:

Click me and then open the navigation menu

We can assign elements with classes or text or states from here, by assigning them as variables:

Open the navigation menu then click the button below:

But there is no point changing something if we cannot change it back!

We could either reset the menu item:

But a better solution would be to toggle the class on or off. jQuery allows us to do this:

.toggleClass("classToToggle");

Toggling works well for toggling between two classes. But what if we have more than one option to toggle between? Below, we have a large white box with instructions inside it. Clearly, we have six color options to togle between.

So here, we need to memorise each of those colors as an option. We do this by assigning the color of each to a variable.

Click one of the colored boxes and see what console logs, then click the large white box.

So what is happening here?

we can see the HTML above, where we have our boxes. Each of the colored boxes has been set a "global" claas name of .new-box and a second class name .new-box1, 2, 3 etc. which dictates the individual box's CSS styling:

Now, we can add the jQuery, which with ONE single variable keeps each box's color in its memory as we click on it:

So, above, our variable named panelColor records the color value of the boxes as we click on them - you can see this happening in the console, using the console.log(panelColor); command.

From here, when we click on the white box, that color value is then applied to the background color of the white box.

But what if we want to reset the original white box's color as white?

We can just add an if statement into the jQuery:

Now go back and click that box a second time!