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

Question

这是我的代码：

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

和

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

我希望console.logprint Test，但它没有！这是一个 jQuery 错误吗？

Answer 1

这里有几个问题。

1. 当您使用数组调用 jQuery 时（就像您正在做的那样），jQuery 期望它是一个 DOM 元素数组。
2. 如果要使用$.each，请使用迭代通用对象或数组的静态版本。

说了这两件事，使用$.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 或未定义，则将被调用函数作为 this 值传递给全局对象。否则，被调用函数作为 this 值传递给 ToObject(thisArg)。

这解释了为什么您的代码不工作.find——需要一个字符串原语而不是一个字符串对象。

这就是为什么文档$.each实际上提到使用this原始值：

（该值也可以通过 this 关键字访问，但 Javascript 将始终将 this 值包装为 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"
});

演示http://jsfiddle.net/KbuZK/

Answer 3

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

在 JavaScript 中，无论实际绑定的是什么，this总是被做成一个Objectso that 。即使原始字符串绑定到上下文（您希望给出），它实际上也是一个对象并且. 这是对这种行为的更彻底的解释。typeof this === "object"thisthistypeof this === "string"thisStringtypeof this === "object"

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

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