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   this

User · Answer

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   x000D   x000D     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                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        x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  mycontent-wrapper  gt  x000D       lt div class  single-content-area  gt  x000D           lt div class  content  gt  x000D              Name  John Doe  lt br  gt  x000D              Age  33   lt br  gt  x000D              Addres  Bangladesh x000D           lt  div gt   lt  --  normal-content-- gt  x000D           lt div class  hidden-content  gt  x000D              This is hidden content x000D           lt  div gt   lt  --  hidden-content-- gt  x000D       lt  div gt  lt  --  single-content-area-- gt  x000D   x000D       lt div class  single-content-area  gt  x000D           lt div class  content  gt  x000D              Name  John Doe  lt br  gt  x000D              Age  33   lt br  gt  x000D              Addres  Bangladesh x000D           lt  div gt   lt  --  normal-content-- gt  x000D           lt div class  hidden-content  gt  x000D              This is hidden content x000D           lt  div gt   lt  --  hidden-content-- gt  x000D       lt  div gt  lt  --  single-content-area-- gt  x000D   x000D   x000D       lt div class  single-content-area  gt  x000D           lt div class  content  gt  x000D              Name  John Doe  lt br  gt  x000D              Age  33   lt br  gt  x000D              Addres  Bangladesh x000D           lt  div gt   lt  --  normal-content-- gt  x000D           lt div class  hidden-content  gt  x000D              This is hidden content x000D           lt  div gt   lt  --  hidden-content-- gt  x000D       lt  div gt  lt  --  single-content-area-- gt  x000D   x000D   lt  div gt  lt  --  mycontent-wrapper-- gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    gt          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

User · Answer

Have a look at this code   HTML    lt div class  multiple-elements  data-bgcol  red  gt  lt  div gt   lt div class  multiple-elements  data-bgcol  blue  gt  lt  div gt    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    lt a href     onclick    this  css  display    none    gt Hide me  lt  a gt    Hope you understand now  The this keyword occurs while dealing with object oriented systems  or as we have in this case  element oriented systems

User · Answer

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

User · Answer

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

[jquery] jQuery $(this) keyword

Examples related to jquery

Examples related to this