javascript - 调用 $.each() 函数时上下文发生变化

Question

我正在使用 Jquery $.each 来获取属于特定类的所有元素，并且我想对每个元素依次调用一个函数。为了实现这一点，我调用了以下函数:

 var elements = $('.colorpickerHolder');
                    elements.each(self.ApplyColorPicker());

我可以在运行时看到 elements 有三个元素，这是正确的。现在，当我调用 self.ApplyColorPicker 时，我用 $(this) 引用每个当前元素。令人惊讶的是，$(this) 不是当前元素。

我的代码在knockout框架下工作，并且两段代码都在viewModel下。在ApplyColorPicker $(this) 内部成为我的viewModel。我不知道为什么会这样。有什么道理吗？

下面是我的ApplyColorPicker代码，只是评论:

 self.ApplyColorPicker = function () {
           $(this).ColorPicker({
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $(this).css('backgroundColor', '#' + hex);
                }
            });
        };

Answer 1

将对函数本身的引用传递给each，而不是函数求值的内容。换句话说，使用 self.ApplyColorPicker 而不是 self.ApplyColorPicker()。

 var elements = $('.colorpickerHolder');
 elements.each(self.ApplyColorPicker);