How can I check what $(this) is?

Question

Hi all,

This question is related to this post but I don't see how I can ask another question in the same question.

I need to know what $(this) this is. If I alert $(this) I get [object Object]. In other words when I alert($(this)) I need for the outcome to be a specific <li> tag so that I can do an IF ELSE statement when I roll off a specific link.

Thanks. James

Answer 1

In a handler, this is the DOM element. So to get the tag, just use the tagName property. Likewise, you can get other properties like ID with this.id.

alert( this.tagName );
alert( this.id );

Or if you needed to test against a specific selector (I wasn't sure from your question), you can use jQuery's .is().

if( $(this).is('.someClass') {...

(Actually, in that simple case of testing for a class, you'd probably use .hasClass() instead.)

if( $(this).hasClass('someClass') {...

There may be more efficient ways. Depends on what you actually need to test for.

---

EDIT: From your comment, you want to check if a child <a> element has the class rpSelected.

Try this:

if( $(this).children('a.rpSelected').length == 0 ) {
       // remove the class

Answer 2

To get the first element out of a jQuery object, use an indexer:

var val = $(this);
...
var domElement = val[0]; //domElement == this (from above)

To get the HTML:

var val = $(this);
...
var html = val[0].html();

Edit:
Reading your comment, are you looking for a class inside the <li> element?

var isSelected = $(this).find('a.rpSelected').length > 0;

Answer 3

If you want to check what is the current object and its values, write this console.log(this); and open firebug > console.

Answer 4

What you can use to see all attributes is a function similar to PHP's print_r function:

function print_r(theObj){
  if(theObj.constructor == Array ||
     theObj.constructor == Object){
    document.write("<ul>")
    for(var p in theObj){
      if(theObj[p].constructor == Array||
         theObj[p].constructor == Object){
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
        document.write("<ul>")
        print_r(theObj[p]);
        document.write("</ul>")
      } else {
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
      }
    }
    document.write("</ul>")
  }
}

And to output it just use print_r($(this));

Answer 5

Hi Sixfoot Studio,

If you just want to execute conditional statements by the tag name represented by the this keyword you can do achieve this with the following code.

if ( $(this).is('li') ) {
    ...
} else if ( $(this).is('ul') ) {
    ...
} else if ( $(this).is('a') ) {
    ...
}

Remember that the keyword this refers to to the "owner" of the function we're executing. So you need to be sure who is calling the function...