如何在另一个函数中使用 $(this) 引用？

Posted 2023-05-09

【中文标题】如何在另一个函数中使用 $(this) 引用？

【英文标题】：How can I use $(this) reference inside another function?

【发布时间】：2012-09-16 23:30:43

【问题描述】：

我有这样的案例——

$('<first-selector>').each(function()
    $(this).click(function()
        $('<second-selector>').click(function()
           /* Here I want to use the top $(this) reference to do some business. 
              I don't want to use like var thisObj = $(this) and refer it inside          
              the click function*/
        );
    );
);

如何在另一个对象中使用$(this) 引用？

【问题讨论】：

在进入第二个回调之前为什么不想保存$(this)？

@ChristopherArmstrong 这就是我不想做的。我在评论中也提到过。

您已经确定了唯一（明智的）解决方案。系统变量 'this' 会自动被替换以反映当前范围，因此要从不同的范围内引用它，您必须手动将其缓存在不同的变量中。

执行此类功能的唯一方法是使用var thisObj = $(this)。你为什么反对使用这样的解决方案？

你为什么要使用each——仅仅.click就够了？

【参考方案1】：

使用$.proxy

$('div').each(function()
    $(this).click(function()
        $('p').click($.proxy(function()
           console.log($(this)); // returns <div>
           /* Here I want to use the top $(this) reference to do some business. 
              I don't want to use like var thisObj = $(this) and refer it inside          
              the click function*/
        , this));
    );
); 

演示：http://jsfiddle.net/TRw4X/

【讨论】：

因此，在这种情况下，我们无法获得对 P 对象的引用。对吗？

只有一个this 关键字。您可以保留默认行为并将其指向ps，或者对其进行调整并使其指向divs，但您不能同时执行这两种操作。保持两个对不同对象的引用的唯一方法是拥有两个变量...

我正在使用api.jquery.com/jQuery.proxy API，但无法使用它。您能简要解释一下这种方法的意义吗？

@Sriram：您可能想了解native method

【参考方案2】：

所以您想在第二个函数中使用第一个函数中的 $(this) 并将其称为 $(this)？这是不可能的，因为 jQuery 维护 this-context。你必须用这样的东西运行：

$('<first-selector>').each(function()

    var first = $(this);

    first.click(function()
    
        $('<second-selector>').click(function()
        
            var second = $(this);
            // do something with first and second.
        );
    );
);

【讨论】：

这个答案已经提供了两次然后被删除，因为 OP 出于某种未知原因不想要它。

这是要走的路。我总是喜欢在任何 jQuery 对象变量中添加一个$ 前缀来区分它们。 var $first = $(this); 但这是个人喜好。

【参考方案3】：

您可以在 jQuery 事件中传递对象的引用。

$('<first-selector>').each(function()
    $(this).click($(this),function()
        $('<second-selector>').click(function(e)
           var $elem = e.data.
           /* Here I want to use the top $(this) reference to do some business. 
              I don't want to use like var thisObj = $(this) and refer it inside          
              the click function*/
        );
    );
);

【参考方案4】：

“解决”您的问题的唯一方法是不使用 jQuery。

但是你用 jQuery 标记你的问题。

您究竟想在这里做什么，为什么容易（以及使用闭包的常见 javascript 习惯用法）被您忽略？

【讨论】：

如果没有 jQuery，你也无法做到这一点

@Bergi -- 当然可以，您可以创建一个处理程序来创建所需的上下文 -- 就像 jQuery 一样。你可以让它成为处理程序中的父级，没有什么能阻止你。

不，原生 addEventListener 也使用 DOM 元素作为上下文 - 与 jQuery 没有区别。并且使用 .bind() 创建自定义上下文也可以在 jQuery 中使用，就像 OP 不想要的取消引用变量一样

确定非 jQuery 可以“与”jQuery 一起使用。我的观点是使用.bind() 的解决方案不是jQuery 解决方案。请随意向我提出技术问题，但我认为这是一个有效的观点。

【参考方案5】：

虽然这不是最好的解决方案（因为您应该像其他解决方案建议的那样通过变量引用它）...如果第二个选择器是第一个选择器的子项，您始终可以使用 parent() 方法。

$('<first-selector>').each(function()
    $(this).click(function()
        $('<second-selector>').click(function()
          /*$(this) is now referencing <second-selector> and by adding parent() it will go up the elements until it find the requested selector*/
          $(this).parents('<first-selector>').doSomething();
        );
    );
);

【讨论】：

我不认为 firstselector 是 secondselector

的父级

你可能是对的......但我会留下答案以防万一。

@ComputerArts #Bergi 是对的。它不是第二个选择器的父级。

【参考方案6】：

在这种情况下，在 DOM 准备就绪时，所有第一选择器都与单击事件处理程序绑定。单击第一个选择器时，第二个选择器绑定到单击事件。要使用代表第一选择器的 $(this)，您必须将代码编写为

$('<first-selector>').each(function()
$(this).click(function()
    var oldthis = $(this);
    $('<second-selector>').click(function()
       alert(oldthis.val());
    );
);

);

确保第一选择器标签与第二选择器标签不同。 试试这个表格

jQuery(document).ready(function()
    jQuery('input[type=text]').each(function()
        jQuery(this).click(function()
            var oldthis = jQuery(this);
            jQuery('input.hello').click(function()
                alert(oldthis.val());
            );
        );
    );
);

首先单击输入文本字段。当单击带有 hello 类的按钮时，它将提醒输入 TEXT 字段的值。