javascript - For 语句使用 This 与 jQuery Each？

Question

我正在尝试从 $.each() 转移到 for() 语句，但在使用 $(this)< 时遇到一些问题 稍后？

即假设我有这个功能

$('.class').each(function() {

var myVar = $(this);
var myVarSrc = myVar.attr('src');
...

我遇到的问题是，当我尝试将其移至 for 语句时

var class = $('.class');
for (var i = 0; i < class.length; i++) {

var myClass = $('.class')[i];
var myClassSrc = myClass.attr('src');
...

后者不会绑定(bind)到 each ，这意味着 myClassSrc - 如果相同 - 将覆盖 ?如何将 for 语句与 this 一起使用？

Answer 1

执行 [i] 会提取 native DOM 元素。

如果您这样做，您应该直接访问 .src 属性。

var cls = $('.class');
for (var i = 0; i < cls.length; i++) {

var myClass = cls[i];
var myClassSrc = myClass.src;

...或使用 eq()^[docs]方法获取具有给定索引的元素的 jQuery 对象:

var cls = $('.class');
for (var i = 0; i < cls.length; i++) {

var myClass = cls.eq(i);
var myClassSrc = myClass.attr('src');

另请注意，我从循环内部删除了 $('.class')。您应该使用循环之前创建的缓存版本。

我还将变量名称从 class 更改为 cls，因为 class 是 JavaScript 中 future 的保留字。

---

根据下面的评论，您遇到了一个非常常见的问题。因为您在 for 循环内分配事件处理程序，并且 JavaScript 没有 block 作用域，所以这意味着您在循环中创建的每个处理程序都引用相同的 myClassSrc 变量，循环完成后将设置为任何值。

为了确定变量的作用域，您需要在引用当前迭代中的值的新变量作用域中创建事件处理程序。为此，我们只需将想要保留的任何值传递到函数调用中，并在那里创建处理程序:

function set_up_handler( elem ) {

    var myClassSrc = elem.src; // <-- now this is a local variable referencing
                               //       the "src" of the element passed in.

    elem.addEventListener( 'click', function() {
        alert( myClassSrc );  // <-- this will reference the local "myClassSrc"
    }, false );

}

var cls = $('.class');
for (var i = 0; i < cls.length; i++) {

    var myClass = cls[ i ];

    set_up_handler( myClass ); // <-- pass the current element into a function

}