jQuery $(this) keyword

Question

Why is it important to use $(this) instead of re-selecting the class?

I am using a lot of animate and css editing in my code, and I know I can simplify it by using

Answer 1

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.

Answer 2

$(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.

Answer 3

When you perform an DOM query through jQuery like $('class-name') it actively searched the DOM for that element and returns that element with all the jQuery prototype methods attached.

When you're within the jQuery chain or event you don't have to rerun the DOM query you can use the context $(this). Like so:

$('.class-name').on('click', (evt) => {
    $(this).hide(); // does not run a DOM query
    $('.class-name').hide() // runs a DOM query
}); 

$(this) will hold the element that you originally requested. It will attach all the jQuery prototype methods again, but will not have to search the DOM again.

Some more information:

Web Performance with jQuery selectors

Quote from a web blog that doesn't exist anymore but I'll leave it in here for history sake:

In my opinion, one of the best jQuery performance tips is to minimize your use of jQuery. That is, find a balance between using jQuery and plain ol’ JavaScript, and a good place to start is with ‘this‘. Many developers use $(this) exclusively as their hammer inside callbacks and forget about this, but the difference is distinct:

When inside a jQuery method’s anonymous callback function, this is a reference to the current DOM element. $(this) turns this into a jQuery object and exposes jQuery’s methods. A jQuery object is nothing more than a beefed-up array of DOM elements.

Answer 4

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 :)

Answer 5

$(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:=)

Answer 6

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(){ 

            jQuery(".single-content-area").hover(function(){
                jQuery(this).find(".hidden-content").slideDown();
            })

            jQuery(".single-content-area").mouseleave(function(){
                jQuery(this).find(".hidden-content").slideUp();
            })
             
        })();

  .mycontent-wrapper {
      display: flex;
      width: 800px;
      margin: auto;
    }     
    .single-content-area  {
        background-color: #34495e;
        color: white;  
        text-align: center;
        padding: 20px;
        margin: 15px;
        display: block;
        width: 33%;
    }
    .hidden-content {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontent-wrapper">
    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->

    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->


    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->

</div><!--/.mycontent-wrapper-->