JQuery $(this) 选择器功能和限制

JQuery $(this) selector function and limitations

提问by Brien Malone

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?

我需要帮助理解 $(this)。是否可以在括号内缩小“this”的重点，或者“this”是否排除了任何其他属性的使用？

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.

另外，你能指出我在 JQuery 文档中的“这个”吗？由于显而易见的原因，很难将“this”用作搜索词。

回答by Nick Craver

thisisn'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不是 jQuery “东西”，而是基本的 JavaScript东西。它不能像示例中那样重写，因为它是一个对象，特别是 DOM 元素或 jQuery 对象（取决于您所处的上下文）。所以如果你这样做：

 $(this + " div")

What you'd reallybe doing is calling .toString()on thisto concatenate the strings, resulting in:

什么你真的做的是呼吁.toString()对this来连接字符串，导致：

 $("[object Object] div")

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

....这不是一个有效的选择器。

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

至于进一步阅读，我相信这篇文章仍然是了解this（上下文关键字）含义的最佳参考/资源之一。

---

---

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

每个评论请求，this在不同地方的一些例子：

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

• 事件处理程序，例如： $("selector").click(function() { alert(this); });
  • this指正在触发事件处理程序的 DOM 元素。
• 在 jQuery 插件中，例如： $.fn.myPlugin = function() { alert(this); });
  • this是调用/链接插件的 jQuery 对象，例如：$("selector").myPlugin();，this是那个$("selector")jQuery 对象。
• 在任何泛型函数中，例如： function myFunc() { alert(this); };
  • this是您所处的上下文，无论是对象还是其他东西，举几个例子：
  • $("selector").click(myFunc);-this是 DOM 元素，如上
  • $("selector").click(function() { myFunc(); });-this是全球内容，window
  • myFunc.call(whatThisIs, arg1, arg2);-this是whatThisIs
    • 查看Function.call()和Function.apply()了解更多信息

回答by gnarf

Use .find()

用 .find()

$( this ).find( 'div' )

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

或者使用context参数jQuery( selector, context )（在内部，它只是调用 find 反正......）

$( 'div', this )

回答by gion_13

thisis not a string representing a css selector(such as div,#my_idor .my_class).
When passing thisas 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).

this不是表示 css 选择器的字符串（例如div,#my_id或.my_class）。
当this作为 jQuery 函数的参数传递时，它会根据当前元素（ this 指的是什么）返回一个 jQuery 对象，因此您不能使用类似$(this + selector).

回答by tster

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

你可以看看这个：http: //api.jquery.com/each/

Basically thisis 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.

基本上this是回调引用的 DOM 元素。您不能这样做，$(this + " div")因为您要向元素添加字符串。您首先需要在第三个代码片段中获取 id。

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

顺便说一下，$(this).children("div")不一样$('#'+$(this).attr("id")+" div")

First off, thismight 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可能没有 ID，在这种情况下，第二种方法根本不起作用。即使它确实有一个 ID，第二个代码实际上也是$(this).find("div")。如果你只想要孩子，你必须这样做：

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

回答by vietean

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是什么，它取决于上下文。当您调用 $ 函数时，它将返回一个 jQuery 对象。

$(this).children("div")

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

这意味着从特定对象，获取所有孩子，请参阅以下链接：http: //jsfiddle.net/vietean/f2Yrg/