0

Apparently I don't fully understand the 'this' selector, because it is not at all working as expected.

In the html/css below I have three identical div elements each containing an identical paragraph.

The first div, which I have given a class of 'x' shows how I expected div.y to appear. The second div, which I have given the class of 'y' is how I wrote the code originally. The third div is not affected by the jQuery and is just there to show how the divs are styled before the jQuery.

The issue I have is I expected that because the expression is targeting all paragraphs within a specific element the 'this' selector would select those paragraphs rather than the element targeted in the parent function.

Could someone please explain to me why the jQuery for class y works and the jQuery for class x doesn't?

EDIT: I am not asking HOW to get a specific result. I am asking WHY I am getting the result that I am. I want to understand better how 'this' works.

html:

<div class='x'><p>Lorem</p></div>
<div class='y'><p>Lorem</p></div>
<div><p>Lorem</p></div>

css:

div {
    background-color:#658923;
    height:75px;
    width:75px;
    margin:10px;
    overflow:hidden;
}
p {
    width:50px;
}
.a {
    background-color:#ff5555;
}

jQuery:

$(document).ready(function() {
    $('div.x').each(function() {
        $('p',this).each(function(){
            $(this).addClass('a').css({
            'height':$(this).outerWidth()
            });
        });
    });
    $('div.y').each(function() {
        $('p',this).addClass('a').css({
            'height':$(this).outerWidth()
        });
    });
});
hal
  • 4,845
  • 7
  • 34
  • 57
  • 2
    `this` is not a selector, it's a reference to a current scope – zerkms Mar 27 '13 at 20:37
  • 2
    In one case, `this` references the `p`, in the other, it references the `div`. – Kevin B Mar 27 '13 at 20:39
  • By the way `this` can be excanged by executing `myFunction.call(otherScope)`. See also [Function.prototype.call](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call). – rekire Mar 27 '13 at 20:40

1 Answers1

1

I'll go through your code and /*comment*/ what this refers to throughout it.

$(document).ready(function() {
    // this == document
    $('div.x').each(function() {
        // this == <div class="x">
        $('p',this).each(function(){
            // this == <p>
            $(this).addClass('a').css({
                'height':$(this).outerWidth() // this == <p> **
            });
        });
    });
    $('div.y').each(function() {
        // this == <div class="y">
        $('p',this).addClass('a').css({
            'height':$(this).outerWidth() // this == <div class="y"> **
        });
    });
});

so in case one, you're getting the outerWidth of the p, while in case 2 you're getting the outerWidth of the div. That is why one behaves differently from the other. Fixing it depends on what you're goal is, the given code doesn't make that very obvious.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • I understand that in one example 'this ==

    ' and in the other 'this == "div.y"'. That was the point of adding multiple examples. What I am asking is why does 'this == "div.y"' instead of

    in the second example.

     – hal Mar 27 '13 at 21:04
  • 1
    Because you're still in the same scope. when you go into a `.each()`, `this` becomes the current element in the collection that's being iterated through. – Kevin B Mar 27 '13 at 21:07
  • Can you point me to where this is explained in the jQuery documentation? I cannot find, which is why I posted this in the first place. – hal Mar 27 '13 at 21:16
  • There's an example of it here: http://api.jquery.com/each/ you'll see in the first example where `this` inside of `.each` references the li's that were selected. – Kevin B Mar 27 '13 at 21:18
  • Thanks. So 'this' is equal to the object that it's containing function is targeting? – hal Mar 27 '13 at 21:38
  • Alright, I think my real issue is a lack of understanding of scope. Off to do some reading. Thanks for the help! – hal Mar 27 '13 at 21:42
  • eh, i guess you can look at it that way. It really depends on the context though, and there are ways to change what `this` references. – Kevin B Mar 27 '13 at 21:42