javascript - Jquery each in 方法

Question

我有一个班级播放列表：

function Playlist() {
    this.episodes = [ /*episode list*/ ];
};

我想制作一个显示每一集的方法：

Playlist.prototype.display = function() {
    $('.episodeList').each(function(index) {
        $(this).children('title').text(this.episodes[index].title);
    });
}

问题是最后的“this”，在“.episodes[index]”之前代表选择的dom对象，而不是我的播放列表。

我怎么解决这个问题 ？谢谢。

Answer 1

将函数绑定到您的上下文：

$('.episodeList').each($.proxy(function(index, elem) {
    $(elem).children('title').text(this.episodes[index].title);
}, this));

更多关于jQuery.proxy

Answer 2

如果each在 dom 元素上使用，this则每个内部都有对 dom 元素的引用

例如：

Playlist.prototype.display = function(e)
{                                       
    $('.episodeList').each(function(index) {                                  
            console.log(this)                                       
    });
}

console.log打印 dom 元素，它是正确的。现在将控制台日志放在每个外部，如下所示：

Playlist.prototype.display = function(e)
{   
    console.log(this)                            
    $('.episodeList').each(function(index) {                                  

    });
}

现在console.log应该打印 PlayList 函数（你的类）。因此，每个范围内的“this”都引用了 dom 元素，但Playlist.prototype.display范围内的 this 引用了 Playlist 函数。

解决方案是：

Playlist.prototype.display = function(e)
{   
    var self = this;                            
    $('.episodeList').each(function(index) {                                  
        console.log(self)
        console.log(this)                   
    });
}      

您需要从 Playlist 范围中获取“this”并将其属性赋予 self var，因此现在 self 可以参考 Playlist。现在你做每一个，所以当前每个中的 this 都引用了 dom 元素，但 self 变量仍然引用了播放列表。

Answer 3

在您的代码$(this)=episodes[index]中，因为它在each函数中。我想这就是你想要的

Playlist.prototype.display = function() {
  var element=$(this);

  $('.episodeList').each(function(index,item) {
        item.children('title').text(element.episodes[index].title);
    });
}

Answer 4

Javascript 中的一个常见做法是创建一个新变量来存储当前类，因为this变量的内容随上下文而变化。考虑类似的东西

    function Playlist()
    {
        var self = this;
        this.episodes = [/*episode list*/];

        this.display = function()
        {
            $('.episodeList').each(function(index) {
                $(this).children('title').text(self.episodes[index].title);
            });
        }
    };

为您的播放列表类定义，并调用 myPlaylist.display() 来显示内容。