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');
...

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

Answer 1

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

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

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

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

...或使用 eq()^{[docs]< /i>} 方法获取具有给定索引的元素的 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 中未来的保留字。

---

根据下面的评论，您遇到了一个非常常见的问题。因为您在 for 循环内分配事件处理程序，并且 JavaScript 没有块作用域，所以这意味着您在循环中创建的每个处理程序都引用相同的 < code>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

}

Answer 2

我认为您不想使用 $.each 的原因是因为它很慢。它慢的原因是因为它是 jQuery。所以放弃 jQuery 并使用 DOM。

var els = document.getElementsByClassName("class");
for (var i = 0, ii = els.length; i < ii; i++) {
  var el = els[i];
  var src = el.src;
}

如果您关心旧版浏览器，您将需要一个 getElementsByClassName 的填充程序。

Answer 3

这应该相当于您的 jQuery foreach 循环：

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

    var elem = $(elemList[i]);
    var myClassSrc = elem.attr('src');
    ...
}

如果您使用普通的 for 循环，则无需担心 this 。在 jQuery 版本中，jQuery 会将 this 绑定到正在迭代的集合中的当前元素。在非 jQuery 版本中，这相当于 elemList[i]。

请注意，“class”并不是世界上最好使用的变量名称，因此我将其更改为“elemList”。事实上，它是 JavaScript 中的保留字。