jQuery — Element Index and Event Object

Photo by Fabien Bazanegue on Unsplash

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:eq() Selector

The :eq selector lets us select an element at the given index within the matched set.

For example, if we have:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

Then we can write:

$("li:eq(2)").css("background-color", "red");

to get the 3rd li and add a red background to it.

.even()

We can get the elements that are the ones with an even number index in the matched set with the even method.

For example, if we have:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

Then we call it by writing:

$("li").even().css("background-color", "red");

to add a red background to the li elements with an even index.

event.currentTarget

We can use the event.currentTarget property to get the current DOM element within the…