Selecting First Element Of Type Using :first-of-type Selector in jQuery

In jQuery, Tips and Tricks by May 6th, 2013

392 Views

The :first-of-type selector is another helpful selector in jQuery. It basically selects all elements that are the first among siblings of the same element name. That said, let’s take a look at quick examples on how to use it in real time to select any element that we need.

How To Use the first-of-type Selector in jQuery

Let’s take a look at a quick example. The following is the HTML Source code used in the examples.

Example 1: Select first element of type div and adding custom class to it when a button is clicked

Example 2: Select first element of type p and adding custom class to it when a button is clicked

Example 3: Select first element of type span and adding custom class to it when a button is clicked

Example 4: Select first element of type td and adding custom class to it when a button is clicked

Simple, isn’t it?

Do you know of any other ways to use the :first-of-type selector in jQuery? Feel free to suggest by commenting below.