Ссылка на текущий объект в цепочке 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);