javascript - 为什么当我在单独的函数中使用 $(this) 并在 .each() 中调用它时它不起作用？

Question

我试图制作一个干净的 jQuery 代码，并将我所有的东西放在一个我在“每个”中调用的函数中。问题是没有任何反应，并且在控制台中没有出现任何错误。

这是一个示例代码：

$(function() {
    $('.myElement').each(function() {
        if($(this).children()) {
            myFunction();
        } else {
            myFunction('.myOtherElement');
        }
    });
});

function myFunction(selector) {
    if(!selector) {
        $(this).html('Finish');
    } else {
        $(this).find(selector).html('Finish');
    }   
}

如果我将函数内容放在 .each 中，它可以工作，但在单独的函数中则不行，我认为它应该可以工作。为什么这段代码不起作用？

Answer 1

在这种情况下执行上下文（this）是不同的，您可以使用.call()来应用它

$(function() {
    $('.myElement').each(function() {
        if($(this).children()) {
            myFunction.call(this);
        } else {
            myFunction.call(this, '.myOtherElement');
        }
    });
});

Answer 2

问题是this在你的情况下不是你的对象.each，而是window对象。将 绑定this为 jquery 对象，而不必每次都使用call. 您可以将其定义为 jquery 插件函数

(function($){
    $.fn.myFunction = function (selector) {
    if(!selector) {
        this.html('Finish'); //notice this here refer to jquery object instead of $(this)
    } else {
        this.find(selector).html('Finish');
    }   
  }
})(jQuery);

$(function() {
    $('.myElement').each(function() {
        if($(this).children()) {
            $(this).myFunction();
        } else {
            $(this).myFunction('.myOtherElement');
        }
    });
});