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

【问题标题】：jQuery: Using string passed by $.eachjQuery：使用 $.each 传递的字符串
【发布时间】：2013-01-12 16:01:41
【问题描述】：

这是我的代码：

<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 错误吗？

【问题讨论】：

['.b'] 中的方括号是什么意思？
@JustinJohn 它是一个包含一个元素的 n 数组。 $.each 可用于循环数组或对象

标签： javascript jquery

【解决方案1】：

这里有一些问题。

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

说到这两点，仍然将$.each 与包含原始值的数组一起使用存在问题。以下代码显示了与您看到的相同的问题：

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

在.each 的回调函数中，this 是一个String object，而不是一个字符串primitive。要理解这一点，我们需要看看 .each 在幕后做了什么：

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

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

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

这解释了为什么您的代码无法正常工作--.find 需要字符串原语而不是字符串对象。

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

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

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

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

【讨论】：

+1 - 虽然@charlietftl 的（当前接受的）答案基本上说了同样的话，但这个答案很好地解释了为什么基于数组的this 内部的eaches 是一个坏主意。跨度>

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

在 JavaScript 中，this 总是被制成一个Object，这样typeof this === "object"，无论this 实际绑定到什么。即使原始字符串绑定到this 上下文（您希望给出typeof this === "string"），this 实际上也是String 对象和typeof this === "object"。这里还有一个thorough explanation of this behaviour。

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

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

【讨论】：