Now, lets take a look at another cool way in which a jQuery allows us to traverse the DOM.
One of my favorite functions is
the siblings function. This function, as the name suggests allows you to
get the siblings of a the current element. For example, suppose you
have a unordered list and you need to change the css of a particular
list item on mouse hover to indicate that it is being highlighted, but
at the same time, you will also need to clear the other list items that
were previously hovered over. As is common in jQuery, there is more than
one way to achieve this. Lets check out two different ways in which
this can be done.
<ul class="level1"><li class="item1 highlighted">a</li>
In order to achieve the effect that we desire, we can simply make use of the hover function.
But lets make things a bit more
complicated. Suppose instead of simply highlighting the current li, your
currently highlighted elements also need to print the information of
the previously highlighted element. In this case, the hover function
wont suffice. I know example sound a bit silly, but its a silly silly
world out there, and requirements can be bizarre and unpredictable. In
the next snippet, i am just going to demonstrate how the siblings
function can come to the rescue when we need to countenance such
I am just going to print the
value of the previously selected item on the firefox console(ah, yes I
am a firefox fan, if you haven't already noticed that by now, although I
occasionally use chrome as well for my adventures). Note that I will be
printing it when my mouse pointer is over the new element, instead of
when the mouse is coming out of the previous element.
var prevHovered = $(this).siblings(".highlighted");
console.log("prev html : "+prevHovered.html());
As you see in the above code, I use
the mouseover function to handle the selection of the element. The
siblings function will select all the siblings of the ul, but the
important thing to note here is that the current element is not returned
in the selected set. So, all you have is a set of siblings of the
current element. You can narrow down the search by providing an optional
selector to the siblings function so that only those siblings that
match the selected criteria will be returned in the set. However, if you
don't pass any argument, all the siblings will be returned.
All the above code did was to
select the previously selected element, check if it was not null. It its
not, print the html of that element on the console and remove the
highlighting from that element.
But I mentioned before that I
used the mouseover function instead of the hover function. The hover
function can take either 1 or 2 arguments as callbacks that can be used
to call your function. If only one argument is sent, it will called on
both of the mouseover and mouseout event. If you provide two functions
as arguments, the first will be used for a mouseover and the second will
be used for the mouseout event.
I figured, instead of having an
empty mouseout, i'd rather use the mouseover function since it is more
natural to our requirement in this case. However you can replace the
mouseover function with the single argument hover function in the above
code, and it would still work the same.
There's more from where that came from. Stay tuned!
Happy Programming :)