CODEWITHSUNDEEP
javascriptjqueryhtmlcss
c3cris
c3cris

Reputation: 1326

Using this this in Jquery

I am having trouble with this in Jquery. When I do that on my website, it returns me the window.width. I just want to access the element from within. This is an example.

<div class="section " style="width:400px"></div>

$( ".section" ).html($(this).width());

or

<div class="section "><p></p></div>

$( ".section p" ).html($(this).parent().width());

also here is JSFiddle jsfiddle.net/XY66w/1

Upvotes: 0

Views: 81

Answers (3)

Sudhir Jonathan
Sudhir Jonathan

Reputation: 17516

I'm going to assume that when you attempt to write this code:

<div class="section " style="width:400px"></div>

$( ".section" ).html($(this).width());

What you're trying to do is show 400px inside the div.section. If that is what you're trying to do, then here's what's happening:

This statement:

$( ".section" ).html($(this).width());

if Javascript, or most other languages I know, is syntactically equivalent to this:

var newHTML = $(this).width();
$( ".section" ).html(newHTML);

As you can see, this isn't a jQuery issue - but more a JavaSciprt / any programming language problem. You're telling the browser to pass in a value to the .html() method, so it must calculate that value first, in the scope of the function that you're calling the method from. In this case, you're calling the method from the window or global scope (or some other undefined scope, so you will never get what you expect.

The simple fix is this:

var section = $('.section');
section.html(section.width());

On the other hand, there are some jQuery methods that accept functions and these are the ones that you seem to be thinking of in this case. For instance, things would be slightly different in case you were using the each method, which accepts a function:

$('.section').each(function(index, element){
    $(this).html($(this).width());
});

In this case, you're passing in a function that jQuery will then call in the scope of each element that is matched by your selector.

The big difference is to differentiate when you're passing in a value and when you're passing in a function that will be evaluated later.

Upvotes: 3

Barmar
Barmar

Reputation: 781059

jQuery only binds this when it's calling a function, such as an event handler, a callback function, a function supplied to something like $.each, etc.

In your examples, you're just supplying an argument to a jQuery method, and it's not inside a function that was called by jQuery. So this just contains whatever the browser's context is, which is window for top-level code. It's not the element(s) matched by the selector .section.

Upvotes: 1

Pointy
Pointy

Reputation: 413737

You can do what you want this way, I think:

$(".section").each(function() {
  $(this).html($(this).width());
});

JavaScript, like a lot of common languages, is not a "lazy" language. An expression statement like yours is evaluated such that all the function parameters are determined before anything's actually called. By using the jQuery .each() API, you can act on each element of the selected set.

Upvotes: 1

Related Questions