Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.
In this part of the series, I will be
discussing a few more ways that are offered by jQuery to traverse
siblings of an element.
The methods that we are going to
discuss in this post are
All these functions provide us with a
way to traverse the siblings of a given DOM element. Lets see some
<ul class="container"><li class="item0 other">0</li>
<li class="item1 other">a</li>
The prev() function selects the DOM element that lies immediately above
the current element. So, if we were to apply the prev function to our
list item3, it would select the list item 2. However, if you want to
select the previous item only if it matches a particular criteria, then
you can pass a selector to the prev() function. Note tat the selector
function DOES not select the first matching previous sibling. Instead it
first select the previous sibling, and then applies the test criteria
The above code would select the second
list item and would add a class called highlighted to it.
Now lets see this
The above code would select the
previous element and then check if it has a class called other. If not,
as it in in our case, it will return an empty jQuery object(note that an
empty jQuery object is not a null object. Its just like an empty
array). The addClass function is called on the empty array and hence has
Now lets take a look at the
This function, when called without the
arguments will select all the previous siblings of the current element.
In our case, all list items except list item with clas .item3 will be
When passed an argument, only
those previous siblings are returned that satisfy the test criteria.
In this case, only the previous
siblings that have the class as 'other' will be returned by the
Sometimes you have a requirement
of selecting the first previous sibling that matches your selection
criteria. For example in the below DOM structure, i have 2 list items
with a class called 'other'. Suppose that i am traversing from list item
'item3' and i need to get the item having the html value of 'a'.i.e.
the second list item.
<ul class="container"><li class="item other">0</li>
<li class="item other">a</li>
Here is how it can be done
As you see, the prevAll function will
traverse in upwards in the DOM for all the siblings. Since you need the
first match, you select the element 0 of the matched set and apply your
style class to it.
Another very useful function is
the prevUntil() function. this function is used to select all the DOM
siblings, before the current element, until an element is found that
satisfies the search criteria.
So, in our example, all the previous
list items of class 'item3' will be selected until a list item with
class 'other' is found on the DOM. This function, when called without
the selector argument, works the same way as the prevAll function. So,
it would be pointless to call this function without the selector
The other functions - next(),
nextAll() and nextUntil() work in exactly the same way as their
counterpart function, apart from the fact that instead of selecting the
previous siblings, these functions work on the siblings that follow the
currently selected element.
These six functions make
traversing in a given sibling structure pretty easy.
Happy Programming :)
Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.