JQuery $(this) selector function and limitations

Question

I need help understanding $(this). Is it possible to narrow the focus of 'this' within the parentheses or does "this" preclude the use of any other attributes?

For example: I don't understand why this code:

$(this).children("div")

can't be rewritten like this:

$(this +" div")

without having to resort to something like:

$('#'+$(this).attr("id")+" div")

Also, can you point me to 'this' in the JQuery documentation? It is difficult to use 'this' as a search term for obvious reasons.

Answer 1

this isn't a jQuery "thing", but a basic JavaScript one. It can't be re-written the way you have in examples because it's an object, in particular either a DOM element or a jQuery object (depending on what context you're in). So if you did this:

 $(this + " div")

What you'd really be doing is calling .toString() on this to concatenate the strings, resulting in:

 $("[object Object] div")

....which isn't a valid selector.

As for further reading, I believe this article continues to be one of the best references/resources to learn what this (a context keyword) means.

---

Per comment requests, some examples of what this is in various places:

• Event handlers, for example: $("selector").click(function() { alert(this); });
  • this refers to the DOM element the event handler is being triggered on.
• Inside a jQuery plugin, for example: $.fn.myPlugin = function() { alert(this); });
  • this is the jQuery object the plugin was called/chained on, for example: $("selector").myPlugin();, this is that $("selector") jQuery object.
• Inside any generic function, for example: function myFunc() { alert(this); };
  • this is the context you're in, whether it be an object or something else, a few examples:
  • $("selector").click(myFunc); - this is the DOM element, like above
  • $("selector").click(function() { myFunc(); }); - this is the global content, window
  • myFunc.call(whatThisIs, arg1, arg2); - this is whatThisIs
    • See Function.call() and Function.apply() for more info

Answer 2

Use .find()

$( this ).find( 'div' )

Or use the context parameter to jQuery( selector, context ) (internally, it just calls find anyway...)

$( 'div', this )

Answer 3

this is not a string representing a css selector(such as div,#my_id or .my_class).
When passing this as a argument for the jQuery function, it returns a jQuery object based on the current element(what this referes to), so you cannot use something like $(this + selector).

Answer 4

You can take a look at this: http://api.jquery.com/each/

Basically this is the DOM element that the callback is referencing. You can't do $(this + " div") because you are adding a string to an element. You first need to get the id like in your third code snippet.

By the way, $(this).children("div") is not the same as $('#'+$(this).attr("id")+" div")

First off, this might not have an ID, in which case the second way won't work at all. And even if it does have an ID, that second code is actualy $(this).find("div"). If you want children only you have to do:

$('#'+$(this).attr("id") + " > div")

Answer 5

First, you must to understand what is this, it is depend on an context. When you call $ function it will return a jQuery object.

$(this).children("div")

It means from specific object, get all children, see the below link: http://jsfiddle.net/vietean/f2Yrg/