Geek Answers Handbook

Define $ (this) in jQuery

What is the best way to find out that $(this) is currently equal in jQuery?

For example alert(this); not very helpful.

The reason I'm asking is because part of the code currently does not do what it should do after I move the code to a function.

The following is an excerpt from the function, and now the value of $ (this) refers to DOMWindow.

 if($(this).hasClass('open')) { alert('I should be closed'); $(this).removeClass('open').addClass('closed'); $(this).parents('article').css('border', '1px solid red').animate({'width': '212px'}, 100, "linear", function() { run_masonry(); }); } else { alert('I should be open'); $(this).removeClass('closed').addClass('open'); $(this).parents('article').css('border', '1px solid blue').animate({'width': '646px'}, 100, "linear", function() { run_masonry(); }); }

How to save it as $ (this), which is the original click of an element?

+8
javascript jquery this
source share
4 answers

What is the best way to find out that $(this) is currently equal in jQuery?

By writing it to the console of your favorite javascript debugging tool (e.g. FireBug or the Chrome developer toolbar, for example):

 console.log($(this));

which will return an object wrapped by jQuery. If you want to know more about the native object, you can use:

 console.log(this);

If you are developing javascript, you should use the javascript debugging tool. alert not such a tool.

Now that you have updated your question with some source of code, it seems like you are using $(this) in a global scope. Then it will refer to the window object. If you want it to refer to some element with a click or something, you will have to subscribe to the .click event first:

 $('.someSelector').click(function() { // here $(this) will refer to the original element that was clicked. });

or if you want to export this code in a separate function:

 function foo() { // here $(this) will refer to the original element that was clicked. } $('.someSelector').click(foo);

or

 function foo(element) { // here $(element) will refer to the original element that was clicked. } $('.someSelector').click(function() { foo(this); });
+22
source share

As code moves into a function, the scope of the code usually changes. Thus, "this" will no longer refer to the original object, but rather to a new (or global "window object"). If you show us your code, we can identify the problem.

+1
source share

I suspect you are doing something like this:

 $('#element').click(function() { clickHandler(); });

In this case, clickHandler will be called in the context of the Window object. To maintain the correct context, just change your code to:

 $('#element').click(clickHandler);
0
source share

If you want to check what happens, you can use either my version or the jquerylog version of the prinzhorn version. This should help you determine step by step what is going on:

http://www.jquerylog.com / https://github.com/fmsf/jQueryLog p>

To call type:

 $("#foo").parents(".t1").next().prev().parent().find(".t2:last .t4:last").text("test");

You will get this output (which identifies the div at each step:

 $('#foo'): [<div id="foo" class="t3"></div>] parents('.t1'): [ <div class="t1">…</div> ] next(undefined): [ <div class="t1">…</div> ] prev(undefined): [ <div class="t1">…</div> ] parent(undefined): [ <body>…</body> ] find('.t2:last .t4:last'): [<div class="t4">teste</div>]
0
source share

More articles:


All Articles