Why won't this function give me the name of the element it's bound to?

Question

I have an some html elements defined with class="tab".

And in my jquery file, I have defined the following function:

  $('.tab').mouseleave( function() {
    alert($(this).name);
  });

When I trigger the mouseleave, for the element of class "tab", with the name "Contact", I do get the alert - but it says "undefined". I was expecting to see "Contact".

What does $(this) give me - does it actually give me the DOM element?

NB. Ultimately, I want to be able to work out on what side ( north, south, east or west ) the mouse left the element. So I'm doing this alert thing to ensure that I actually have access to the width and height of that element. So far, I don't seem to have access to that info.

The `name` attribute should only be used on `input` elements. — David Thomas, Jul 28 '12 at 13:20
what do you mean by name? is it an attribute or is it the tagname you are referring to? — spaceman12, Jul 28 '12 at 13:38
*"What does $(this) give me"* ... see here: http://api.jquery.com/jQuery/#jQuery1 — Felix Kling, Jul 28 '12 at 14:17

score 3 · Accepted Answer · answered Jul 28 '12 at 13:22

3

name is a native javascript method, you are working with $(this), which is a jQuery object, and not the native DOM element, that would be just this :

$('.tab').mouseleave( function() {
   alert(this.name);
});

FIDDLE

answered Jul 28 '12 at 13:22

adeneo

312,895
29
395
388

Ah, *someone* finally used the DOM instead of wrapping everything in needless jQuery methods. +1 =) – David Thomas Jul 28 '12 at 13:25
@adeneo does this work inside a jQuery $(document).ready() function? – BeeBand Jul 28 '12 at 13:27
1

@DavidThomas - Thats why I decided to answer even though there where six other answers. BeeBand, yes it works everywhere! – adeneo Jul 28 '12 at 13:28

score 1 · Answer 2 · answered Jul 28 '12 at 13:19

1

$(this) gives you a jQuery object that wraps the native DOM element.

this is the DOM element you seek.

this is where you may find a more comprehensive description.

answered Jul 28 '12 at 13:19

Michael Robinson

29,278
12
104
130

score 1 · Answer 3 · answered Jul 28 '12 at 13:19

1

The name is an attribute, right? So check $(this).attr('name')

answered Jul 28 '12 at 13:19

lkurylo

1,621
33
59

.attr() was depreciated in place of .prop() a few versions ago. – Spikeh Jul 28 '12 at 13:21
prop() doesn't appear to work for me ( 'undefined' ) but attr() does. – BeeBand Jul 28 '12 at 13:24
1

@Spikeh where do you see an attr is deprecated? http://api.jquery.com/category/deprecated/ – lkurylo Jul 28 '12 at 13:25
I'm a bit wrong :) .prop() is preferred, because .attr()'s implementation often gets properties and attributes confused (prior to JQuery 1.6 anyway). The OP is asking to retrieve the "name" attribute of an unspecified tag. The "name" attribute should only exist on form attributes, and if it exists on other elements, it is syntactically incorrect... so .prop() will return undefined. .attr() will retrieve any attribute - i.e. $("div").attr('thisisatest') will retrieve the "thisisatest" attribute from all divs, but "thisisatest" is not a valid attribute. – Spikeh Jul 28 '12 at 13:33

score 1 · Answer 4 · edited May 23 '17 at 11:55

$(this) will give you the JQuery object.

this gives you the DOM element.

You can get the name by calling $(this).prop('name') if the "name" attribute is supported by that HTML element.

The "name" attribute is currently only supported by form elements (input, select, textarea, form); the "name" part of the name-value pairs that are sent to the server when a POST verb is sent to the server (i.e. you post a form with the "POST" method).

Further reading:

http://forum.jquery.com/topic/please-explain-attr-vs-prop-change-in-1-6

.prop() vs .attr()

http://timmywillison.com/2011/When-to-use-.attr()-and-.prop().html

Moin Zaman · Answer 5 · 2012-07-28T13:25:39.593

jQuery allows you to get the width and the height like this:

$(this).height(); //is the computed height eg. 200 without the dimension

For your specific code example, try $(this).prop('name'); or $(this).attr('name'); //now deprecated

this will pick up foo from <input name="foo" />

You could also try this.name if your element has a name attribute, which should only be applied to input elements. However it may return undefined and throw an error if you don't have the attribute.

$(this) is a jQuery object with the DOM element inside it. this is the DOM element direct.

score 1 · Answer 6 · answered Jul 28 '12 at 13:19

1

You are working with jQuery object, use attr or prop function to get attribute value:

$('.tab').mouseleave( function() {
    // either should work
    alert($(this).attr('name'));
    alert($(this).prop('name'));
});

answered Jul 28 '12 at 13:19

Zbigniew

27,184
6
59
66

.attr() was depreciated in place of .prop() a few versions ago. – Spikeh Jul 28 '12 at 13:21
It's not, `attr` is for attributes, and `prop` is for properties, even though they both mostly work, there are certain preferred uses, and in many cases `prop` should be used intead of `attr`, and especially so on properties. – adeneo Jul 28 '12 at 13:26
ok, I'm not quite right then - .prop() is preferred, as .attr() can often get properties and attributes confused - See this SO post: http://stackoverflow.com/questions/5874652/prop-vs-attr – Spikeh Jul 28 '12 at 13:27

score 1 · Answer 7 · answered Jul 28 '12 at 13:20

1

     $('.tab').mouseleave( function() {
    alert($(this).attr('name'));
  });

answered Jul 28 '12 at 13:20

voodoo417

11,861
3
36
40

score 0 · Answer 8 · answered Jul 28 '12 at 13:38

0

It is because $ gives an array of wrapped elements. Thus $(this) will be an array with one element. $(this).attr("name") will give you the name since attr knows it is an array. If you want you can use $(this)[0].name or simply this.name

answered Jul 28 '12 at 13:38

Esben Skov Pedersen

4,437
2
32
46

Why won't this function give me the name of the element it's bound to?

8 Answers8