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

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

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

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

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

Answer 3

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

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

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

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

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