$(this) returns a cached version of the element, hence improving performance since jQuery doesn't have to do a complete lookup in the DOM of the element again.
I'm going to show you an example that will help you to understand why it's important.
Such as you have some Box Widgets and you want to show some hidden content inside every single widget. You can do this easily when you have a different CSS class for the single widget but when it has the same class how can you do that?
Actually, that's why we use $(this)
**Please check the code and run it :) ** enter image description here
(function(){ _x000D_
_x000D_
jQuery(".single-content-area").hover(function(){_x000D_
jQuery(this).find(".hidden-content").slideDown();_x000D_
})_x000D_
_x000D_
jQuery(".single-content-area").mouseleave(function(){_x000D_
jQuery(this).find(".hidden-content").slideUp();_x000D_
})_x000D_
_x000D_
})(); .mycontent-wrapper {_x000D_
display: flex;_x000D_
width: 800px;_x000D_
margin: auto;_x000D_
} _x000D_
.single-content-area {_x000D_
background-color: #34495e;_x000D_
color: white; _x000D_
text-align: center;_x000D_
padding: 20px;_x000D_
margin: 15px;_x000D_
display: block;_x000D_
width: 33%;_x000D_
}_x000D_
.hidden-content {_x000D_
display: none;_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="mycontent-wrapper">_x000D_
<div class="single-content-area">_x000D_
<div class="content">_x000D_
Name: John Doe <br/>_x000D_
Age: 33 <br/>_x000D_
Addres: Bangladesh_x000D_
</div> <!--/.normal-content-->_x000D_
<div class="hidden-content">_x000D_
This is hidden content_x000D_
</div> <!--/.hidden-content-->_x000D_
</div><!--/.single-content-area-->_x000D_
_x000D_
<div class="single-content-area">_x000D_
<div class="content">_x000D_
Name: John Doe <br/>_x000D_
Age: 33 <br/>_x000D_
Addres: Bangladesh_x000D_
</div> <!--/.normal-content-->_x000D_
<div class="hidden-content">_x000D_
This is hidden content_x000D_
</div> <!--/.hidden-content-->_x000D_
</div><!--/.single-content-area-->_x000D_
_x000D_
_x000D_
<div class="single-content-area">_x000D_
<div class="content">_x000D_
Name: John Doe <br/>_x000D_
Age: 33 <br/>_x000D_
Addres: Bangladesh_x000D_
</div> <!--/.normal-content-->_x000D_
<div class="hidden-content">_x000D_
This is hidden content_x000D_
</div> <!--/.hidden-content-->_x000D_
</div><!--/.single-content-area-->_x000D_
_x000D_
</div><!--/.mycontent-wrapper-->$(document).ready(function(){
$('.somediv').click(function(){
$(this).addClass('newDiv'); // this means the div which is clicked
}); // so instead of using a selector again $('.somediv');
}); // you use $(this) which much better and neater:=)
Have a look at this code:
HTML:
<div class="multiple-elements" data-bgcol="red"></div>
<div class="multiple-elements" data-bgcol="blue"></div>
JS:
$('.multiple-elements').each(
function(index, element) {
$(this).css('background-color', $(this).data('bgcol')); // Get value of HTML attribute data-bgcol="" and set it as CSS color
}
);
this refers to the current element that the DOM engine is sort of working on, or referring to.
Another example:
<a href="#" onclick="$(this).css('display', 'none')">Hide me!</a>
Hope you understand now. The this keyword occurs while dealing with object oriented systems, or as we have in this case, element oriented systems :)
using $(this) improves performance, as the class/whatever attr u are using to search, need not be searched for multiple times in the entire webpage content.
Source: Stackoverflow.com