CODEWITHSUNDEEP
jquerycss
Manolis
Manolis

Reputation: 167

How can I use $(this) correctly in jquery?

I'm trying to resize text to the size of the parent box, Can someone please explain to me why this is working:

$('.box').css('font-size',$('.box').height());

and this is not working:

$('.box').css('font-size',$(this).height());

by the way I'm using jquery mobile with phonegap.

Upvotes: 1

Views: 90

Answers (3)

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

As you can see from jQuery docs:

$('.box').css('font-size',function () {
   return $(this).height() + "px";
});

Context of the passed function is bind to the object(s) of which the css() method is called. That is why, this will be assigned to HTML element with the class dom.

Upvotes: 5

cssyphus
cssyphus

Reputation: 40038

Example:

HTML:

 <input type="button" class="box" id="someID" value="Click this box" />

jQuery:

$('.box').click(function() {

    var test = $(this).attr('id');
    alert('Here is the ID for the element on which you clicked: ' + test);

});

When you trap an event, that event is associated with an element on the page. In this case, the element is the button-type input field, and the trapped event is the 'click' event.

The code inside the click() event function can refer to the element that triggered the event as $(this).

If you wish to refer to any other element in the DOM, you must specify the element.

Upvotes: 0

xdumaine
xdumaine

Reputation: 10329

That doesn't work because you're calling the css function of $('.box') and passing it the value of $(this).height(), not a reference to its self. In that case this is still the context of the function that holds that line of code. Try something like this, to accomplish what you want:

$('.box').css('font-size',function () {
   return $(this).height() + "px";
});

Upvotes: 7

Related Questions