{"id":412,"date":"2022-08-30T15:00:55","date_gmt":"2022-08-30T15:00:55","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/identify-this-in-jquery-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:00:55","modified_gmt":"2022-08-30T15:00:55","slug":"identify-this-in-jquery-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/identify-this-in-jquery-collection-of-common-programming-errors\/","title":{"rendered":"Identify $(this) in jQuery-Collection of common programming errors"},"content":{"rendered":"

Whats the best way to find out what $(this)<\/code> currently equals in jQuery?<\/p>\n

For example alert(this);<\/code> isn’t much help.<\/p>\n

The reason I ask is that a piece of code is not currently doing what it should do after I have moved the code into a function.<\/p>\n

The excerpt below is now in a function, and $(this) now seems to refer to the DOMWindow.<\/p>\n

if($(this).hasClass('open'))\n  {\n    alert('I should be closed');\n    $(this).removeClass('open').addClass('closed');\n    $(this).parents('article').css('border', '1px solid red').animate({'width': '212px'}, 100, \"linear\", function() {\n    run_masonry();\n    });\n  }\n  else\n  {\n    alert('I should be open');\n    $(this).removeClass('closed').addClass('open');\n    $(this).parents('article').css('border', '1px solid blue').animate({'width': '646px'}, 100, \"linear\", function() {\n    run_masonry();\n  });\n}\n<\/code><\/pre>\n
How do I keep it as $(this) being the original clicked element?<\/p>\n
    \n
  1. \n
    \n
    Whats the best way to find out what $(this)<\/code> currently equals in jQuery?<\/p>\n<\/blockquote>\n
    By logging it to the console of your favorite javascript debugging tool (like FireBug or Chrome developer toolbar for example):<\/p>\n
    console.log($(this));\n<\/code><\/pre>\n
    which will return a jQuery wrapped object. If you want to know more about the native object you could use:<\/p>\n
    console.log(this);\n<\/code><\/pre>\n
    If you are doing javascript development you should use a javascript debugging tool. alert<\/code> is not such tool.<\/p>\n
    Now that you have updated your question with some code source it seems that you are using $(this)<\/code> in the global scope. Then it will refer to the window<\/code> object. If you want it to refer to some clicked element or something you will have to first subscribe to the .click event:<\/p>\n
    $('.someSelector').click(function() {\n    \/\/ here $(this) will refer to the original element that was clicked.\n});\n<\/code><\/pre>\n
    or if you wanted to externalize this code in a separate function:<\/p>\n
    function foo() {\n    \/\/ here $(this) will refer to the original element that was clicked.\n}\n\n$('.someSelector').click(foo);\n<\/code><\/pre>\n
    or:<\/p>\n
    function foo(element) {\n    \/\/ here $(element) will refer to the original element that was clicked.\n}\n\n$('.someSelector').click(function() {\n    foo(this);\n});\n<\/code><\/pre>\n<\/li>\n
  2. \n
    With moving code into a function usually the scope of the code changes. So “this” will no longer refer to the original object but rather to a new one (or the global “window” object). If you show us your code we will be able to identify the problem.<\/p>\n<\/li>\n
  3. \n
    I suspect that you do something like this:<\/p>\n
    $('#element').click(function() {\n    clickHandler();\n});\n<\/code><\/pre>\n
    In this case clickHandler<\/code> will be called in Window object context. To preserve correct context just change your code to:<\/p>\n
    $('#element').click(clickHandler);\n<\/code><\/pre>\n<\/li>\n
  4. \n
    If you want to check what’s being passed around you can use either my version or prinzhorn’s version of jquerylog. It should help you identify step by step what’s happening:<\/p>\n
    http:\/\/www.jquerylog.com \/ https:\/\/github.com\/fmsf\/jQueryLog<\/p>\n
    For a call like:<\/p>\n
    $(\"#foo\").parents(\".t1\").next().prev().parent().find(\".t2:last .t4:last\").text(\"test\");\n<\/code><\/pre>\n
    You’ll get an output like this (which identifies the div in each step:<\/p>\n
    $('#foo'): []\n    parents('.t1'): [ \u2026 ]\n        next(undefined): [ \u2026 ]\n            prev(undefined): [ \u2026 ]\n                parent(undefined): [ \u2026 ]\n                    find('.t2:last .t4:last'): [teste]\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-09 19:07:25. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    Whats the best way to find out what $(this) currently equals in jQuery? For example alert(this); isn’t much help. The reason I ask is that a piece of code is not currently doing what it should do after I have moved the code into a function. The excerpt below is now in a function, and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-412","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=412"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}