Question

这是我的代码：

<div class='a'>
  <div class='b'>Test</div>
</div>

和

$(['.b']).each(function () {
  console.log($('.a').find(this).text()); // Expecting to print "Test"
});

我希望console.log能够打印Test，但事实并非如此！这是一个jQuery错误吗？

Answer 1

这里有一些问题。

当你用数组调用jQuery时（就像你正在做的那样），jQuery期望它是一个DOM元素数组。
如果您想使用$.each，请使用迭代通用对象或数组的static version。

对于这两样的事情，有 stil 使用$.each和包含原始值的数组的问题。以下代码显示您遇到的相同问题：

$.each([".b"], function () {
    console.log($('.a').find(this).text()); // Expecting to print "Test"
});

在.each的回调函数中，this是String 对象，而不是字符串原语。要理解这一点，我们需要了解.each正在做什么：

for (; i < length;) {
    if (callback.apply(object[i++], args) === false) { // <----
        break;
    }
}

重要的一点是对apply的调用。根据ECMAScript规范，当原始值传递给apply时，将调用值toObject方法：

如果thisArg为null或未定义，则调用的函数将作为此值传递给全局对象。 否则，被调用函数将ToObject（thisArg）作为此值传递。

这解释了为什么你的代码不起作用 - .find需要字符串原语而不是String对象。

这就是为什么the documentation for $.each实际上提到使用this原始值的原因：

（也可以通过this关键字访问该值，但Javascript将始终将此值包装为Object，即使它是一个简单的字符串或数字值。）。

因此，修复代码问题的方法是利用传递给回调函数的element参数：

$.each([".b"], function (_, item) {
    console.log($('.a').find(item).text()); // Expecting to print "Test"
});

Answer 2

循环遍历数组时，不要在每个内部使用this。它在对象或元素集合上工作正常但在数组中失败。

使用each的第二个参数来访问数组元素

$(['.b']).each(function (index, item) {
  console.log($('.a').find(item).text()); // Expecting to print "Test"
});

DEMO http://jsfiddle.net/KbuZK/

Answer 3

那是因为你处于JavaScript的黑暗面。

在JavaScript中，this始终为Object，以便typeof this === "object"，无论this实际绑定到哪个this。即使原始字符串绑定到typeof this === "string"上下文（您希望提供this），String实际上是typeof this === "object"对象和$(['.b']).each(function (index, value) { console.log($('.a').find(value).text()); // Expecting to print "Test" }); 。这是一个更thorough explanation of this behaviour。

在迭代非对象数组时，应该使用回调函数的第二个参数作为值。

{{1}}

jQuery：使用$ .each传递的字符串

3 个答案: