对于声明使用此vs jQuery每个？

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]方法获取具有给定索引的元素的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没有block scope,这意味着你每次在循环创建处理程序引用相同的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

}