引用 Jquery 链中的当前对象答案

【问题标题】：Reference to current object in Jquery chain引用 Jquery 链中的当前对象
【发布时间】：2012-02-06 09:29:10
【问题描述】：

以下链起作用：

    $("</p>").html('message').hide().appendTo("#chat").fadeIn()
.parent().scrollTop($('#chat')[0].scrollHeight);

但这不是：

    $("</p>").html('message').hide().appendTo("#chat").fadeIn()
.parent().scrollTop($(this)[0].scrollHeight);

this.scrollHeight 也不起作用。如何在 jquery 链中获取当前对象引用？

【问题讨论】：

【解决方案1】：

您只能在回调中访问当前对象。您无法访问链中的当前对象。

试试这个：

var $parent = $("</p>").html('message').hide().appendTo("#chat").fadeIn().parent();
$parent.scrollTop($parent[0].scrollHeight);

如果你真的不想脱离你的链条，你可以重新选择：

$("</p>").html('message').hide().appendTo("#chat").fadeIn()
.parent().scrollTop($("#chat")[0].scrollHeight);

但我强烈建议您不要这样做。无需两次选择同一个 DOM 元素。

【讨论】：

【解决方案2】：

在您的第二个代码中，sn-p this 没有指向 #chat，这就是它不起作用的原因。 this 主要指向调用函数实例或触发任何事件的对象。

你可以试试这样的

var $p = $("</p>").html('message').hide().appendTo("#chat");

$p.fadeIn().parent().scrollTop($p[0].scrollHeight);

【讨论】：

【解决方案3】：

嗯，很明显。 #chat 元素是一个静态元素，您正在向它动态附加段落。因此，您希望事先获得对该元素的引用（例如，在页面初始化时）：

var chat = $( '#chat' )[0];

现在，你这样做：

$( '<p />' ).html( 'message' ).hide().appendTo( chat ).fadeIn();
$( chat ).scrollTop( chat.scrollHeight );

因此，我们的想法是在页面初始化时检索对主要静态元素（聊天框、工具栏、面板、导航等）的引用，然后在整个应用程序代码中使用这些引用。

【讨论】：