Lets see what I mean by that. Consider the following DOM structure.
As seen in the structure, i have one
main ul which has three li elements. this ul acts as the main container.
The third li element in the main container in turn has another ul which
has three li subelements.
For both the ul elements, the li
elements have been assigned classes pertaining to their location in the
list. So, we ended up with a total of four li elements having the same
class for the li element- item1 and item2.
Now let us see the various ways in which we can select the different elements in this structure.
As usual, we will be writing all our code in the jQuery onload function which is as follows.
Lets assume that we want to color all the elements that have the class 'item2' within our ul that has a class 'container'
There are actually three ways to achieve this.
Here is the first.
This way is simple, and we use normal
css selectors to find all the sub elements in the DOM under our
.container that have a class named as .item2. This, in our case,would
set the background color of both the li elements that have the 'item2'
Now lets see a second way to do it.
This is also equivalent tot the
previous snippet. This selector makes use of "search context". A search
context is nothing but the context in which the elements will be
searched. So, if i were to read out the selector expression, it would be
read something like this
'Select all the elements that have a class called item, that exist inside the element that has a class called container'
This means that the first
argument that is passed to the selector is the actual search expression,
whereas the second argument that we passed to the selector becomes the
context of our search.
It also means that when we don't pass the second argument, the entire DOM structure is searched by default.
Here is the third way to do it.
In the above code, we are using the find() jQuery function to find the elements. If i were to read it aloud, it would be read as
'Select the elements with a
class called container first, and inside all those selected containers,
select the elements that have the class called item2.'
Sometimes, if your classes are
unique, you may not feel the need to find elements using the context.
Or, in many cases, it is possible to find the elements using a normal
selector that would traverse the entire DOM. Why use contexts and
However, when your structure
becomes complicated, it may come in extremely handy to use contexts to
find elements. Because, when you find using contexts, jQuery has to
traverse fewer DOM elements to get the elements you desire to search,
thereby saving you time and improving overall performance.
Sometimes, it it better to make
use of a context when you already have a part of the search for the
context already done for you.
For example, let us assume you
register a click function for your container. And inside the click
function, you need to do the same thing that we did above.
Here is how it could be done in the normal way
But there is one thing to be noticed
here. We are already in side the click handler of the container. That
means, jQuery has already searched the DOM for our container. Then why
do we need to again ask jQuery to search the DOM for the container?
Instead, we can make use of the current context, and simply search for
the item we want.
Here is how it can be done.
The context in a click handler is
determined by the value of the 'this' variable. So, finding elements can
become easier for jQuery if you just know when and were you can reduce
the lookups that jQuery has to do, by making use of an existing context.
That's all for now. I shall discuss more ways of finding elements using jQuery in future posts.