jQuery $(this) Selector with Examples

Posted on September 23, 2015 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

Recently had many tutorials where it was the case to use the jQuery $(this) selector and couldn't find any official documentation about it. Therefore in this article I want to cover a full explanation with some good examples, so everyone can understand what this thing does exactly and where you must use jQuery $(this) selector.

First of all, before starting with any examples, jQuery $(this) selector refers or stands for the current selected object in a loop or event. For example, if you have an unordered list <ul> with five list items <li> inside and you run a click event for each list item, when you click on a single item, jQuery $(this) selector will refer exactly to that clicked item. Let me show you below.

Video Tutorial

Using jQuery $(this) Selector with .click Function

As I said in the example above, we will have some links inside list items. I will use the .click() event to add a class to every item, individually, that was clicked.

The HTML

<ul class="sampleList">
	<li><a href="#">Some Link</a></li>
	<li><a href="#">Another Links</a></li>
	<li><a href="#">One More Links</a></li>
</ul>

The Code

$('.sampleList > li > a').click(function() {
	$(this).parent().toggleClass('sampleClass');
	return false;
});

The Result

jQuery $(this) Selector with Click Function

The code above will simply add a class to each list item once the link inside is clicked. Notice the parent() function, which goes one level upper with the selection, starting from the current item clicked.

Using jQuery $(this) Selector with .each Function

Basically each() function finds all selectors with the same tag name, class or id and creates a loop to target each element detected. It doesn't matter if the elements are not close to each other, jQuery $(this) selector will handle every item found in the loop. Let me show you an example.

The HTML

<div class="someDivList">
	<div class="divItem">A div with some text with class</div>
	<div class="divItem">Another div with class</div>
	<div>This div doesn't have any class</div>
	<div class="divItem">One more div with class</div>
</div>

The Code

$('.someDivList .divItem').each(function() {
	$(this).css('background', 'lightblue');
});

The Results

jQuery $(this) Selector with Each Function

The example above will just add a background color only to the elements found using the class divItem. The other div without any class will be skipped, but the loop will still remain active and will continue to search in the DOM structure.

Using jQuery $(this) Selector with .hover Function

This function is mainly the same as the click function. When you hover on a link, for example, it will execute an action only for the current hovered item. Pretty simple.

The HTML

<div class="someLinksList">
	<a href="#">A Simple Link</a>
	<a href="#">Another Simple Link</a>
	<a href="#">One More Simple Link</a>
</div>

The Code

$('.someLinksList > a').hover(function() {
	$(this).toggleClass('hover');
});

Conclusion

Using jQuery $(this) selector is very effective and a good habit when you code with multiple items of the same type, or with the same class or id. Usually $(this) selector is used within event functions such as blur, change, focus, submit and others. You can download the files below with all the examples used above.

Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.33 out of 5)
Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 7 = 8

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.