1

I have tried my best to understand this but cannot understand why 'this' is not working in first code but works in second code example.

First (this doesnt work here)

$('#' + ID).parent().siblings().each(function() {
    selectChildren();
});

function selectChildren() {
    $(this).children('.left-links-dashboard').css({
        'color': 'grey'
    });
    //this one doesn't work..why ????
}

Over here the selectChildren() function has an argument and when calling the function this is passed to function and it works..

Second

$('#' + ID).parent().siblings().each(function() {
    selectChildren(this);
});

function selectChildren(esd) {
    $(esd).children('.left-links-dashboard').css({
        'color': 'grey',
        'font-weight': '400'
    });
    $(esd).children('.left-links-dashboard').children('i').removeClass('fa-arrow-circle-right').addClass('fa-angle-right');

}

Have read through stackoverflow, MDN and other resources but couldn't understand why the second code example works. Any explanation would really help me. Thanks

Adnan Javed
  • 25
  • 5
  • 1
    Because in the second one your passing `this` as a parameter. Otherwise `this` refers to the function selectChildren – Keith Feb 29 '20 at 15:00
  • 2
    Aside from the answer below you can also make the first example work by using [`call()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), like this: `selectChildren.call(this);` – Rory McCrossan Feb 29 '20 at 15:00
  • Keith. this is what I cannot understand. When a parameter is passed to selectChildren() function, it works. But it doesn't work when called without this parameter. I am trying to understand how it works. – Adnan Javed Feb 29 '20 at 15:11
  • Rory. Yeah, i read recently call and apply. You are right i can use call. Its jut that i can't move ahead without understanding why its not working in first case. – Adnan Javed Feb 29 '20 at 15:13

2 Answers2

0

this refers to the current function reference

But in your first code the this is in inside the wrapper selectChildren() since the function is invoked inside another function, if you want the first code to work you can do it like this



$('#' + ID).parent().siblings().each(selectChildren); 
// I removed the anonymouse function to set the reference of the jquery element directly to selectChildren function 

function selectChildren() {
    $(this).children('.left-links-dashboard').css({
        'color': 'grey'
    });
    //this one doesn't work..why ????
}
onecompileman
  • 809
  • 4
  • 11
0

The this in javascript is the context of owner of the function. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Your first example implies that the invoked function is owned by the window object. If you want to use your function in a "jquery way":

$(this).selectChildren()

then research writing jquery plugins: https://learn.jquery.com/plugins/basic-plugin-creation/

Hari Lubovac
  • 614
  • 3
  • 14
  • 3
    `If you want to use your function in a "jquery way": $(this).selectChildren()` For that to work the function would need to be entirely re-written as a plugin. There's easier and quicker ways to execute code under a given scope in jQuery without resorting to that. – Rory McCrossan Feb 29 '20 at 15:03