Ссылка на текущий объект в цепочке Jquery

Question

Работает следующая цепочка:

    $("</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 цепи?

Answer 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 дважды.

Answer 2

Ну, это очевидно. Элемент #chat является статическим элементом, и вы динамически добавляете к нему абзацы. Следовательно, вы хотите получить ссылку на этот элемент заранее (например, при инициализации страницы):

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

Теперь вы делаете это:

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

Итак, идея состоит в том, чтобы извлечь ссылки на основные статические элементы (окно чата, панель инструментов, панель, навигация и т. Д.) При инициализации страницы, а затем использовать эти ссылки во всем коде приложения.

Answer 3

Во втором фрагменте кода this не указывает на #chat, поэтому он не работает.this в основном указывает на экземпляр вызывающей функции или объект, который вызвал любое событие.

Вы можете попробовать что-то вроде этого

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

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