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.log打印Test,但它没有!这是一个jQuery错误吗？

Answer 1

这里有一些问题.

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

有了这两点说,有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对象.

这就是为什么实际提到使用原始值的文档$.eachthis:

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

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

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