CODEWITHSUNDEEP
javascriptjquery
Reacting
Reacting

Reputation: 6123

Why $(this) from jQuery isn't working?

I am trying to figure out why my $(this) from jQuery isn't working in this case:

<ul>                
    <li class="tabs-li-js ui-tabs-tab ui-tabs-active">
      <a href="#fragment-1" class="anchor-tabs" id="ui-id-1">Online Investing</a>
    </li>

    <li class="tabs-li-js ui-tabs-tab">
      <a href="#fragment-2" class="anchor-tabs" id="ui-id-2">Guided Investing</a>
    </li>              
</ul>

And this is the js function:

var $tabsLiJs = $('.tabs-li-js');
var productDescriptionMob = function() {
    $tabsLiJs.on('click', function(e) {
        e.preventDefault();
        $tabsLiJs.each(function(i, el) {
            if ($(el).hasClass('ui-tabs-active')) {
                $('[data-action="show'+i+'"]').show();
            } else {
                $('[data-action="show'+i+'"]').hide();
            }
        });

    });
};

The way it is above works perfectly.

As you may see, in the second line there is an element: $tabsLiJs which has an on click event. Then, in the .each function is where I am trying to add the $(this) for a matter of context. But it is not working.

I am trying to use the this here:

$(this).each(function(i, el) {
     if ($(el).hasClass('ui-tabs-active')) {
          $('[data-action="show'+i+'"]').show();
     } else {
          $('[data-action="show'+i+'"]').hide();
     }
});

What can that be? Any suggestions?

Upvotes: 0

Views: 78

Answers (3)

L. Shimizu
L. Shimizu

Reputation: 11

In this case, the "this" keyword is refering to the "productDescriptionMob" object.

The "this" keyword has 4 possible ways of being defined in Javascript:

1 - Global context. When the keyword "this" is not inside a declared object, it's considered to be in the global scope, and its value is the global object (or the window object in most cases).

2 - Implicit/Object: When the keyword "this" is inside a declared object, it's value will be the closest parent object declared.

3 - Explicit binding: When the methods "call", "apply" or "bind" are used, the first parameter defines what the keyword "this" value will be inside the function.

4 - New objects: When the key word "this" is inside a function which is called using the keyword "new" before it, the "this" keyword will refer to the newly created object.

Your code is set in the second case, Implicit/Object. It means that, since the closest parent object declared before the keyword "this" is the "productDescriptionMob" object, so it is its value.

More information can be found here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Just change your following function:

$('.tabs-li-js').each(function(i, el) {
     if ($(el).hasClass('ui-tabs-active')) {
          $('[data-action="show'+i+'"]').show();
     } else {
          $('[data-action="show'+i+'"]').hide();
     }
});

Upvotes: 0

Carsten Massmann
Carsten Massmann

Reputation: 28196

Whereas $tabsLiJS is a jquery object containing all DOM objects that carry the given class name, the this in the click-function will only refer to the one actually clicked element.

Upvotes: 1

Related Questions