Finding elements using jQuery - Part 1

Today in this blog post I am going to discuss a few ways in which we can find DOM elements using jQuery.

We all use jQuery selectors in order to select elements to work upon. Most of our selectors are usually based upon the id or the class or some other attribute, and sometimes even the structure of the elements being selected. However, apart from these selectors, jQuery also allows you to select elements in a completely different way, like all the siblings of an element, all the children of an element. It also allows you to search within the context of another element.

Lets see what I mean by that. Consider the following DOM structure.

a
b
c     

c1
c2

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.

$(function(){
//All our code goes here.
});

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.

$(".container .item2").css({"background-color":"blue"});

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' class.

Now lets see a second way to do it.

$(".item2",".container").css({"background-color":"blue"});

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.

$(".container").find(".item2").css({"background-color":"blue"});

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 confuse things?

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

$(".container").click(function(){
$(".item2",".container").css({"background-color":"blue"});
});

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.

$(".container").click(function(){
$(".item2",$(this)).css({"background-color":"blue"});
});

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.

Till then, cya!

Happy Programming :)
Signing Off
Ryan