Identifying Elements with jQuery

Inspecting an element is as easy as 1-2-3! To inspect an element, follow these steps:

1. Open any website on your Chrome browser.
2. Right-click on the element that you want to inspect and click Inspect.
3. The element will be highlighted on the screen in the developer panel.

Watch the video to understand how to inspect an element.

In the first lesson, we learned that the HTML of a site is comprised of three components: elements, attributes, and values.

When building a jQuery selector, we can use an element's attribute to identify a specific element. The two most common attributes you will encounter when inspecting an element are ids and classes. Let's take a look at an element that we encountered in the first lesson.

We were able to identify that this element had two attributes: id and class. Now let's translate this into a jQuery selector.

The attribute id and class, when written as a jQuery selector, are translated into the following:

Now that we have our jQuery selector, let's write it out!

To identify the ﹤ul﹥ element using its id, we will write the following selector:

To identify the ﹤ul﹥ element using its class, we will write the following selector:

Now that you have a general idea of how to build a jQuery selector with id and class, let's delve a little deeper into this!

The following table contains an element in the left column along with its corresponding jQuery selector in the right one.

Now that you can build a jQuery selector of an element using its id or class attributes, let's learn how to use an element's location to write a jQuery selector.

Sometimes using the element's class or id alone isn't enough to build a unique jQuery selector. There may be instances where the element's attributes aren't specific enough or the element might not have any attributes at all. When this happens, you will need to use the element's location.

To build a jQuery selector by location, you will first need to refer to its associated elements.

• Parent: The element located above the child element in the HTML structure.
• Child: A child element is located right below the parent element in the HTML structure.
• Descendant: A descendant element is located anywhere below the parent element in the HTML structure.

In general, an element can fall under multiple categories from the list above.

For example, take a look at your family tree. You are not only a child of your parent, but also the descendant of your grandparent. In turn, your parent is also a child of their parent and so on.

Like a family tree, the way elements can be categorized is dependent on the context and on what the element is related to.

Let's look at the example below to get a better understanding of element location:

If we focus on div#AppBodyHeader in relation to div#pageBody, div#AppBodyHeader is the child element of div#pageBody as it is nested directly below that element.

However, if we focus on div#AppBodyHeader in relation to td.label, div#AppBodyHeader is the the parent element of td.label as it is nested directly above that element.

So far you've learned how to identify elements using attributes and how to identify elements using their location. Now, let's combine both!

Let's look at a previous HTML example to identify an element using attribute and location.

Let's say, for example, that we want to use td.label as our jQuery selector. Easy enough, right?

However, if you take a closer look at the example above, you see that there are two td.label elements in the HTML. So how can we uniquely identify one td.label element over the other?

Let's try to identify the highlighted element below.

In this scenario, we also need to take into consideration the parent element of td.label so we can differentiate it from the first one. To do this, we will use a [space].

Using a [space] tells our selector to look for the child or descendant of an element. This means we will look for "children" of the first element that match the second element. This is used to find an element based on one of its "parents".

For the example above, to uniquely identify the second td.label, we will write the following jQuery selector:

This means that we are looking at the child element of div#contentWrapper that matches td.label. To put it alternatively, we are looking at the td.label element whose parent is div#contentWrapper.